javascript - 限制刷盒的最小和最大宽度

Question

我在我的 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
    }
}

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

Answer 1

使用您在 your comment 中链接的代码，这是我的解决方案:

设置两个变量来存储画笔大小的最后一个有效值...

let previousS0, previousS1;

...您将在 brushed 函数中填充它:

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

但是，在分配这些值之前，重要的部分来了:使用您的条件，您将在画笔组(此处命名为 brushGroup)上调用 brush.move:

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

它所做的是:给定条件(即所选区域小于画笔范围的 10%)，使用先前的有效值设置所选区域的大小并从函数返回。

这是更新的 bl.ocks:https://bl.ocks.org/GerardoFurtado/08cca27078d34e5112257320689b376d/9d18a2e8bbe7d92ceb2874cbb9ed4378e0b6c2ef