Javascript 限制刷箱的最小和最大宽度

我在react应用程序中实现了D3笔刷功能。我想限制笔刷的最小和最大宽度。这是我的密码

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));
};

现在看起来是这样的

我想限制笔刷的选择矩形宽度。最小值应为总宽度的10%，最大值应为20%。我怎么能拥有它

我尝试的内容：在brushed（）函数中，我放置了一个

if

循环

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
    }
}

---

这失败了。我想我把支票放错位置了。我也不确定是否应该有支票

使用您链接的代码，以下是我的解决方案：

设置两个变量以存储笔刷大小的最后有效值

let previousS0, previousS1;

。。。您将在

brushed

函数中填充它：

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

但是，在分配这些值之前，有一个重要的部分：使用您的条件，您将调用笔刷组上的

brush.move

（此处命名为

brushGroup

）：

if（（（s[1]-s[0]）/width）*100）<10）{
调用（brush.move，[previous0，previous1]）；
返回；
};

其作用是：给定条件（即选定区域小于笔刷范围的10%），使用先前的有效值设置选定区域的大小，并从函数返回

---

以下是更新后的bl.ocks:

这可以通过使用

笔刷来实现。移动
。我更喜欢写一个有用的答案：那么，你能不能创建一个有用的代码段，我可以编辑它？@GerardoFurtado，那真的很有帮助。因为它是react项目，所以很难获得工作片段。你能用代码告诉我怎么做吗？
if((((s[1] - s[0])/width)*100) < 10){
    brushGroup.call(brush.move, [previousS0, previousS1]);
    return;
};