12

我目前正在尝试自定义在http://nvd3.com/ghpages/lineWithFocus.html找到的时间序列图示例。这是使用 nvd3 实现的，它是 d3 之上的一个库。我希望在顶部图表中获得数据点的工具提示，但也希望能够在同一图表中选择一个范围，如示例中底部的“取景器”图表。

为此，我在基本折线图示例中添加了一个“画笔”（参见http://nvd3.com/ghpages/line.html）。范围选择就像一个魅力，但是，数据点的工具提示不再起作用，除了刚刚超出轴范围的点。看起来，位于画笔区域的数据点不再获得鼠标事件，并且画笔将它们全部吸收。

需要更改哪些行的数据点接收鼠标事件（特别是鼠标悬停，我不关心点击）？

尝试使用捕获所有事件

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

如果适用，然后在数据点上触发一些“鼠标悬停”事件。这怎么能实现（我不想遍历所有数据点，然后检查哪个最接近鼠标事件......）？有没有更直接的方法？

4

3 回答 3

11

如果您将在“画笔”上的任何位置检查元素（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");

所以解决方案是在绘制数据（线、路径、散点图圆等）之前调用画笔。

于 2012-12-11T10:46:22.590 回答
0

因为画笔覆盖会抓住你的鼠标事件——你需要它——我不确定你能不能解决这个问题。最终，事件冒泡仅适用于 DOM 树，而这些元素充其量只能是兄弟元素。

可能不是迭代所有数据点，而是只迭代那些被画笔选中的数据点。查看d3.touches(container)

于 2012-11-30T01:20:02.343 回答
0

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

于 2017-09-26T14:29:07.993 回答