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

时间:2016-10-16 01:49:41

标签: d3.js brush

我试图为画笔(和画笔处理)行为设置一些限制。我想在画笔开始和画笔结束之间设置最小量。

我从这开始:

https://bl.ocks.org/mbostock/4349545

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

我认为这可能只是修改了:

的值
d3.event.selection

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

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

这适用于画笔手柄。但不影响刷子。

我已将修改过的MB代码放在以下位置:

http://plnkr.co/edit/fDBdDrfN5kySWDYGzJdR?p=preview

任何关于前进的一般想法都将受到赞赏。

1 个答案:

答案 0 :(得分:2)

上面我修正过的问题中详述的额外一行似乎解决了这个问题。

总结:

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 + ")"; });
然而,刷子似乎确实通过框架从鼠标获得默认控件。因此,通常情况下,需要告诉刷柄如何在刷子没有时响应鼠标。

在特殊情况下,例如程序控制画笔。需要告诉刷柄和刷子如何表现。这两个元素的语法略有不同。

我在上面的代码段中添加了一行,产生了所需的行为:

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 + ")"; });

这似乎有效。