D3 - 刷子和刷子手柄的程序控制答案

【问题标题】：D3 - Programmatic control of Brush AND Brush HandleD3 - 刷子和刷子手柄的程序控制
【发布时间】：2016-10-16 01:49:41
【问题描述】：

我正在尝试为画笔（和画笔手柄）的行为设置一些限制。我想在画笔开始和画笔结束之间设置一个最小数量。

我是从这个开始的：

当用户移动画笔时。该代码更改了画笔手柄的变换属性。这似乎也会影响底层画笔的位置。

我认为可能只是修改以下值：

d3.event.selection

可能会奏效。例如，为了确保用户不能滚动小于 150 像素，我编写了以下代码：

var s = d3.event.selection;
if (s[0] < 150) {
s[0] = 150;
}

这适用于刷柄。但不影响刷机。

我已将修改后的 MB 代码放在以下位置：

任何关于前进的一般想法都将不胜感激。

【问题讨论】：

标签： d3.js brush

【解决方案1】：

我上面修改后的问题中详述的额外行似乎解决了问题。

总结：

gBrush.call(brush.move, [150, s[1]]);

已添加到：

var s = d3.event.selection;
if (s[0] < 150) {
s[0] = 150;
gBrush.call(brush.move, [150, s[1]]);
}

更详细地说，画笔手柄似乎没有通过框架从鼠标获得任何默认控制，需要使用以下行告诉如何移动：

handle.attr("display", null).attr("transform", function(d, i) { return "translate(" + s[i] + "," + height / 2 + ")"; });

然而，画笔似乎确实通过框架从鼠标获得了默认控制。因此，通常情况下，需要告诉画笔手柄如何响应鼠标，而画笔没有。

在特殊情况下，例如以编程方式控制画笔。刷柄和刷子都需要被告知如何表现。这两个元素的语法略有不同。

我在上面的 sn-p 中添加了一个额外的行，它产生了所需的行为：

var s = d3.event.selection;
if (s[0] < 150) {
s[0] = 150;
gBrush.call(brush.move, [150, s[1]]);
}

对画笔的调用会处理它的新行为。

对 s 数组的更改随后会通过下面的代码行来执行，该代码行会更改画笔句柄：

handle.attr("display", null).attr("transform", function(d, i) { return "translate(" + s[i] + "," + height / 2 + ")"; });

这似乎行得通。

【讨论】：