d3.js:限制画笔的大小

d3.js: limit size of brush

本文关键字：画笔 js d3      更新时间：2023-09-26

有没有办法限制画笔的大小，即使范围更大？

我把一个只有x刻度的刷子放在一起，可以移动和调整大小。我希望能够限制用户可以调整大小的程度（基本上只限于某一点）。

在以下示例中，当笔刷大于最大范围的一半时，笔刷函数将停止更新。不过，笔刷本身仍然可以扩展。有没有办法防止这种情况发生？或者有更好的处理方法吗？

非常感谢！

请在此处查看此代码的作用：http://bl.ocks.org/3691274（编辑：此演示现在有效）

bar = function(range) {
      var x_range = d3.scale.linear()
          .domain([0, range.length])
          .range([0, width]); 
      svg.selectAll("rect.items").remove();
      svg.selectAll("rect.items")
          .data(range)
        .enter().append("svg:rect")
          .attr("class", "items")
          .attr("x", function(d, i) {return x_range(i);})
          .attr("y", 0)
          .attr("width",  width/range.length-2)
          .attr("height", 100)
          .attr("fill", function(d) {return d})
          .attr("title", function(d) {return d});
}
var start = 21;
bar(data.slice(0, start), true);
var control_x_range = d3.scale.linear()
    .domain([0, data.length])
    .range([0, width]); 
controlBar = svg.selectAll("rect.itemsControl")
    .data(data)
  .enter().append("svg:rect")
    .attr("class", "itemsControl")
    .attr("x", function(d, i) {return control_x_range(i);})
    .attr("y", 110)
    .attr("width",  width/data.length-2)
    .attr("height", 20)
    .attr("fill", function(d) {return d});
svg.append("g")
    .attr("class", "brush")
    .call(d3.svg.brush().x(d3.scale.linear().range([0, width]))
    .extent([0,1*start/data.length])
    .on("brush", brush))
  .selectAll("rect")
    .attr("y", 110)
    .attr("height", 20);
function brush() {
    var s = d3.event.target.extent();
    if (s[1]-s[0] < 0.5) {
        var start = Math.round((data.length-1)*s[0]);
        var end = Math.round((data.length-1)*s[1]);
        bar(data.slice(start,end));
    };
}

当超过允许的最大大小时，我最终通过重新绘制画笔来解决这个问题：

function brush() {
    var s = d3.event.target.extent();
    if (s[1]-s[0] < 0.5) {
        var start = Math.round((data.length-1)*s[0]);
        var end = Math.round((data.length-1)*s[1]);
        bar(data.slice(start,end));
    }
    else {d3.event.target.extent([s[0],s[0]+0.5]); d3.event.target(d3.select(this));}
}

演示：http://bl.ocks.org/3691274

我仍然对阅读更好的解决方案感兴趣。

下面是使用d3.v4和ES6:的另一种策略

brush.on('end', () => {
    if (d3.event.selection[1] - d3.event.selection[0] > maxSelectionSize) {
        // selection is too large; animate back down to a more reasonable size
        let brushCenter = d3.event.selection[0] + 0.5 * (d3.event.selection[1] - d3.event.selection[0]);
        brushSel.transition()
            .duration(400)
        .call(brush.move, [
            brushCenter - 0.49 * maxSelectionSize,
            brushCenter + 0.49 * maxSelectionSize
        ]);
    } else {
        // valid selection, do stuff
    }
});

如果用户放开笔刷选择时笔刷选择的大小过大，则会将其动画设置回指定的最大大小（maxSelectionSize）。此时，'end'事件将以可接受的选择大小再次激发。

注意0.49标量：这是防止浮点/舍入错误所必需的，如果笔刷的move() d大小仍然过大，则浮点/舍入误差可能会导致无限循环。

下面是一个将画笔的最小宽度限制为100px，最大宽度限制为200ps的示例。我在d3.v4.js中添加了几行，用于设置画笔宽度的限制。

增加了笔刷限制（[min，max]）用于设置限制：

var _limit = null;
brush.limit = function (l) {
  _limit = l;
}

move（）函数中的鼠标移动中断事件：

if (_limit && e1 - w1 < _limit[0]) {
  return;
}

（Demo）（源代码）

这段代码不错，但我发现了一个小错误。无论何时s[1]-s[0] < 0.5，它都会锁定你的笔刷，但如果你一直按下调整大小并将所有笔刷带到oposite方向，它就会开始"移动"笔刷而不采取任何行动（即它的行为不正常）。

我确信我能想出一个合理的解决方案。如果是，我会重新张贴在这里。

（很抱歉把它作为答案发布在这里，但由于你已经回答过一次，我想我不能作为评论发布）。

相关文章：