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

据我所知，没有＆＃34;清洁＆＃34;处理它的方式。原因是单击定义一个大小为0的范围，刷子认为该范围为空范围（参见source），因此它故意使选择无效（参见source）。

这一切都意味着除非你创建自己的d3-brush版本来做你想做的事情，否则没有办法让空选择不是空的，也不是一种渲染画笔的方法。一个空的选择。

我可以想到一个解决方法：当您检测到空选择（s == null）时，使用brush.move将选择设置为某些。那个某些东西必须是一个大小不为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]);
}