我正在尝试为画笔(和画笔 handle )行为设置一些限制。我想设置画笔开始和画笔结束之间的最小量。
我从这个开始:
https://bl.ocks.org/mbostock/4349545
当用户移动画笔时。该代码更改画笔 handle 的变换属性。这似乎也会影响底层画笔的位置。
我认为也许只是修改以下值:
d3.event.selection
可能有用。例如,为了确保用户滚动的距离永远不会小于 150 像素,我编写了以下代码:
var s = d3.event.selection;
if (s[0] < 150) {
s[0] = 150;
}
这适用于画笔 handle 。但不影响刷。
我已将修改后的 MB 代码放在以下位置:
http://plnkr.co/edit/fDBdDrfN5kySWDYGzJdR?p=preview
任何关于前进的一般想法将不胜感激。
最佳答案
上面我修改的问题中详细说明的额外一行似乎可以解决问题。
总结:
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 似乎没有通过框架从鼠标获得任何默认控制,需要使用以下行告知如何移动:
handle.attr("display", null).attr("transform", function(d, i) { return "translate(" + s[i] + "," + height / 2 + ")"; });
然而,画笔似乎确实通过框架从鼠标获得了默认控制。因此,通常需要告诉画笔 handle 如何响应鼠标,而画笔则不需要。
在特殊情况下,例如以编程方式控制画笔。刷柄和刷子都需要被告知如何行为。这两个元素的语法略有不同。
我在上面的代码片段中添加了一行,它产生了所需的行为:
var s = d3.event.selection;
if (s[0] < 150) {
s[0] = 150;
gBrush.call(brush.move, [150, s[1]]);
}
对画笔的调用会处理它的新行为。
然后通过下面的代码行对 s 数组进行更改,该代码行会更改画笔 handle :
handle.attr("display", null).attr("transform", function(d, i) { return "translate(" + s[i] + "," + height / 2 + ")"; });
这似乎有效。
关于d3.js - D3 - 刷子和刷子 handle 的编程控制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40066029/