Restricting minimum and maximum width of brush box

Question

I have implemented a D3 brush feature in my react application. I want to limit the minimum and maximum width of the brush. Here is my code

createBarChart() {
    const svg = select(this.myRef.current);

    var margin = {
            top: 20,
            right: 20,
            bottom: 110,
            left: 40
        },
        margin2 = {
            top: 150,
            right: 20,
            bottom: 30,
            left: 40
        },
        width = svg.attr("width") - margin.left - margin.right,
        height = svg.attr("height") - margin.top - margin.bottom,
        height2 = svg.attr("height") - margin2.top - margin2.bottom;

    console.log(height2)

    parseDate = timeParse("%b %Y");

    var x = scaleLinear().range([0, width]),
        x2 = scaleLinear().range([0, width]),
        y = scaleLinear().range([height, 0]),
        y2 = scaleLinear().range([height2, 0]);

    var xAxis = axisBottom(x),
        xAxis2 = axisBottom(x2),
        yAxis = axisLeft(y);


    var focus = svg.append("g")
        .attr("class", "focus")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var context = svg.append("g")
        .attr("class", "context")
        .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");


    var brush = brushX()
        .extent([
            [0, 0],
            [width, height2]
        ])
        .on("brush end", this.brushed.bind(this, x, x2, xAxis, width, focus, context));

    var area2 = area()
        .curve(curveMonotoneX)
        .x(function(d) {
            return x2(d.date);
        })
        .y0(height2)
        .y1(function(d) {
            return y2(d.price);
        });


    _zoom = zoom()
        .scaleExtent([1, Infinity])
        .translateExtent([
            [0, 0],
            [width, height]
        ])
        .extent([
            [0, 0],
            [width, height]
        ])
        .on("zoom", this.zoomed.bind(this, x, x2, xAxis, width, focus, context, brush));

    _area = area()
        .curve(curveMonotoneX)
        .x(function(d) {
            return x(d.date);
        })
        .y0(height)
        .y1(function(d) {
            return y(d.price);
        });



    let scale = scaleLinear();

    svg.append("defs").append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", width)
        .attr("height", height);

    console.log("execute")


    var d_data = [{
        date: 1,
        price: 3
    }, {
        date: 2,
        price: 4
    }, {
        date: 3,
        price: 5
    }, {
        date: 4,
        price: 32
    }, {
        date: 5,
        price: 8
    }, {
        date: 6,
        price: 11
    }, {
        date: 7,
        price: 3
    }, {
        date: 8,
        price: 33
    }, {
        date: 9,
        price: 3
    }, {
        date: 10,
        price: 12
    }, {
        date: 11,
        price: 42
    }, {
        date: 12,
        price: 7
    }, ]

    x.domain([1, 12]);
    y.domain([0, max(d_data, function(d) {
        return d.price;
    })]);
    x2.domain(x.domain());
    y2.domain(y.domain());

    let line_func = line()
        .x((d, i) => ((this.state.width / d_data.length) * (i)))
        .y(d => (this.state.height - scale(d.price)))



    focus.append("path")
        .datum(d_data)
        .attr("class", "area")
        .attr("d", line_func)



    focus.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);


    focus.append("g")
        .attr("class", "axis axis--y")
        .call(yAxis);

    context.append("path")
        .datum(d_data)
        .attr("class", "area")
        .attr("d", area2)


    context.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height2 + ")")
        .call(xAxis2);

    context.append("g")
        .attr("class", "brush")
        .call(brush)
        .call(brush.move, x.range());

    svg.append("rect")
        .attr("class", "zoom")
        .attr("fill", "none")
        .attr("width", width)
        .attr("height", height)
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .call(_zoom);

}


brushed(x, x2, xAxis, width, focus, context) {

    //console.log("brushed")
    if (event.sourceEvent && event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
    var s = event.selection || x2.range();

    if ((((s[1] - s[0]) / width) * 100) > 5.55) {}

    x.domain(s.map(x2.invert, x2));
    focus.select(".area").attr("d", _area);
    focus.select(".axis--x").call(xAxis);

    console.log((((s[1] - s[0]) / width) * 100))
    select(".zoom").call(_zoom.transform, zoomIdentity
        .scale(width / (s[1] - s[0]))
        .translate(-s[0], 0));


};

zoomed(x, x2, xAxis, width, focus, context, brush) {
    //console.log("zoomed")
    if (event.sourceEvent && event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
    var t = event.transform;
    x.domain(t.rescaleX(x2).domain());
    let class_area = document.getElementsByClassName("area")

    focus.select(".area").attr("d", _area);
    focus.select(".axis--x").call(xAxis);
    context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
};

Currently it looks like this

I want to restrict the selection rectangle width of the brush . Minimum should be 10% of the total width and maximum should be 20%. How can I have it.

What I tried: In brushed() function, I put an if loop

brushed(x, x2, xAxis, width, focus, context) {
    if (event.sourceEvent && event.sourceEvent.type === "zoom") return;
    var s = event.selection || x2.range();
    //check if rectangle width is greater than 10% of total width
    if ((((s[1] - s[0]) / width) * 100) > 10) {
        //execute code
    }
}

This failed. I guess I am putting the check at wrong position. Also I am not sure if a check should be there or not?

Answer 1

Using the code you linked in your comment, here is my solution:

Set two variables to store the last valid values for the brush size...

let previousS0, previousS1;

... which you'll populate inside the brushed function:

var s = d3.event.selection || x2.range();
previousS0 = s[0];
previousS1 = s[1];

But, before assigning those values, comes the important part: using your conditional, you'll call brush.move on your brush group (here named brushGroup):

if((((s[1] - s[0])/width)*100) < 10){
    brushGroup.call(brush.move, [previousS0, previousS1]);
    return;
};

What this does is: given the condition (i.e., selected area being less than 10% of the brush extent), set the size of the selected area using the previous valid values and return from the function.

Here is the updated bl.ocks: https://bl.ocks.org/GerardoFurtado/08cca27078d34e5112257320689b376d/9d18a2e8bbe7d92ceb2874cbb9ed4378e0b6c2ef