我已经在我的react应用程序中实现了D3画笔功能.我想限制画笔的最小和最大宽度.这是我的代码

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

    var margin = {
            top: 20,right: 20,bottom: 110,left: 40
        },margin2 = {
            top: 150,bottom: 30,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,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,height]
        ])
        .extent([
            [0,height]
        ])
        .on("zoom",this.zoomed.bind(this,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,{
        date: 8,price: 33
    },{
        date: 9,{
        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",area2)


    context.append("g")
        .attr("class"," + 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",height)
        .attr("transform"," + margin.top + ")")
        .call(_zoom);

}


brushed(x,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,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));
};

目前看起来像这样

@L_403_0@

我想限制画笔的选择矩形宽度.最小值应为总宽度的10％,最大值应为总宽度的20％.我怎么有

我尝试了什么：在brushed()函数中,我放置了一个if循环

brushed(x,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
    }
}

这失败了.我想我把支票放在错误的位置.我也不确定是否应该有支票吗？