JSFiddle - React, Tailwind, and code Playground

CSS

.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

JavaScript

var x = d3.scale.identity().domain([0, 200]);

var chart = d3.select("body")
    .append("svg")
    .attr("class", "chart")
    .attr("width", 250)
    .attr("height", 100)
    .append("g")
    .attr("transform", "translate(10,20)");

var Axis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .ticks(5);

chart.append('g')
    .attr("class", "axis")
    .call(Axis);

var brush = d3.svg.brush()
    .x(x);

brush.extent(x.domain());

var brushNode = chart.append("g")
    .call(brush);

brushNode
    .selectAll("rect")
    .attr("y", -10)
    .attr("height", 10);

// store the reference to the original handler
var oldMousedown = brushNode.on('mousedown.brush');

// and replace it with our custom handler
brushNode.on('mousedown.brush', function () {
    brushNode.on('mouseup.brush', function () {
        clearHandlers();
    });
    
    brushNode.on('mousemove.brush', function () {
        clearHandlers();
        oldMousedown.call(this);
        brushNode.on('mousemove.brush').call(this);
    });
    
    function clearHandlers() {
        brushNode.on('mousemove.brush', null);
        brushNode.on('mouseup.brush', null);
    }
})