D3 画笔自定义句柄空选择可见性

Question

我试图弄清楚如何让自定义画笔句柄突出显示等于单个值的范围内的数据，这似乎会导致空选择。

这是我根据 Mike Bostock 的一个示例重新创建的 Plunkr。它在 Angular 2/ionic 中，所以如果这是一个问题，请到这里查看他的示例的纯 javascript。我编辑的主要内容是注释掉当有空选择时他用 css 隐藏自定义句柄的位置。

if (s == null) {
    //handle.attr("display", "none");
    //circle.classed("active", false);
}

http://plnkr.co/edit/tRyhlJ

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

如果你看一下 plunkr 的例子，你会发现如果你点击然后放开画笔仍然是一个完美的球体，在你点击的地方有一条线。相反，如果消失了，我希望画笔手柄保持不变......并且在您单击展开手柄时不会导致错误。

我目前遇到的错误，似乎找不到解决方法，是这样的：

我如何优雅地忽略这个内部 d3 错误并继续让我的选择扩展？

我尝试了各种方法，例如在处于此状态时关闭指针事件，以及手动取消隐藏/调整默认句柄的大小，但均无济于事。每次单击手柄时都会出现此错误。

Answer 1

据我所知，没有“干净”的方法来处理它。原因是单击定义了一个大小为 0 的范围，画笔将其视为空范围（参见source），因此它故意使选择无效（参见source）。

这一切都意味着，除非您创建自己的 d3-brush 版本来执行您想要的操作，否则无法创建不为空的空选择，也无法为空选择呈现画笔。

我能想到一种解决方法：当您检测到空选择（s == null）时，使用brush.move 将选择设置为something。 something 必须是一个大小不为 0 的范围（因为如果将其设为 0，那么 d3 将再次认为该选择为空并将其无效）。要进行看起来像零大小选择的非零选择（它必须是，因为它是由单击事件定义的），您必须使其成为一个微小的选择，例如[123, 123.0001]。而不是 123，您需要知道单击的鼠标位置，您可以使用 d3.mouse 获得。把它们放在一起，它看起来像这样：

if (s == null) {
  var mousex = d3.mouse(this)[0]
  gBrush.call(brush.move, [mousex, mousex+.001]);
}