JSFiddle - React, Tailwind, and code Playground

CSS

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

JavaScript

var width = 200;

var x = d3.scale.linear().range([0, width - 20]).domain([-0.5, 5.5]);

var chart = d3.select("body")
    .append("svg")
    .attr("class", "chart")
    .attr("width", width)
    .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 x2 = d3.scale.quantize();

var brush = d3.svg.brush()
    .x(x)
    .extent([0.5, 1.5])
    .on("brush", brush);



function brush() {
    var s = d3.event.target.extent();
    if (d3.event.mode === "move") {
/*   var extentlength = Math.round(s[1] - s[0])
        d3.event.target.extent([Math.round(s[0] + 0.5) - 0.5,
        Math.round(s[0] + 0.5) - 0.5 + extentlength])
   */    } else {
        d3.event.target.extent([Math.round(s[0] + 0.5) - 0.5,
        Math.round(s[1] + 0.5) - 0.5])
    }
    d3.event.target(d3.select(this))
}

chart.append("g")
    .call(brush)
    .selectAll("rect")
    .attr("y", -10)
    .attr("height", 10);