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(container)

Answer 3

我遇到了同样的问题。我意识到画笔覆盖了其他物体（在我的例子中是圆圈）。所以，首先我创建了画笔rect，然后我创建了其他对象。这样我也可以访问其他对象的事件。

鼠标事件并在D3中刷

3 个答案: