鼠标事件并在D3中刷

Question

我目前正在尝试自定义http://nvd3.com/ghpages/lineWithFocus.html上的时间系列图表示例.这是使用nvd3实现的,这是一个位于d3之上的库.我想在顶部图形中提供数据点的工具提示,但也希望能够在同一图形中选择一个范围,如示例中的底部"查找查找器"图形.

为此,我在基本折线图的示例中添加了"画笔"(请参阅http://nvd3.com/ghpages/line.html).范围选择就像一个魅力,然而,数据点的工具提示不再起作用,除了刚好在轴范围之外的点.看起来,位于画笔区域中的数据点不再获得鼠标事件,并且画笔吸收它们全部.

线路的数据点接收鼠标事件需要改变什么(特别是鼠标悬停,我不关心点击)？

尝试捕获所有事件

d3.select(window).on("...", function) 

然后在数据点上触发一些"鼠标悬停"事件(如果适用).怎么可能实现这一点(我不会通过所有数据点,然后检查哪一个最接近鼠标事件...)？有更简单的方法吗？

Answer 1

如果你将在'brush'上的任何地方检查元素(Chorme),你会注意到你试图捕获事件的其他图形元素之后构建的元素.

d3.brush函数创建一个隐藏的背景来捕获鼠标事件.

// An invisible, mouseable area for starting a new brush.
      bg.enter().append("rect")
          .attr("class", "background")
          .style("visibility", "hidden")
          .style("cursor", "crosshair");

所以解决方案是在绘制数据之前调用画笔(线条,路径,散点图等).

Answer 2

由于画笔覆盖将捕获您的鼠标事件 - 并且您需要它 - 我不确定您是否可以解决这个问题。最终，事件冒泡仅适用于 DOM 树，并且这些元素最多只能是兄弟元素。

可能您可以只迭代画笔选择的数据点，而不是迭代所有数据点。查看d3.touches（容器）