D3：如何在单个图表中处理缩放和工具提示？

Question

我有一个可视化对象，它实际上是一系列堆积的条形图，每个条形图都包含多个面板。例如，这是三个这样的条形图，每个都有四个面板。

我设法实现了在图表之间协调的平移/缩放功能。例如，这就是我从上一张图像放大到第三个面板时的样子。缩放行为是通过放置在每个图表上方的不可见矩形调用的。

我的问题是我想根据绘图中用户光标的位置启用工具提示功能。由于缩放矩形位于图表的顶部，因此，实际图表本身中的任何SVG元素都不会注册任何鼠标事件。

有人知道解决这个问题的方法吗？

Answer 1

我正在关注Mike Bostock 的例子，就像你rect在我的整个图表上放置一个，然后调用缩放行为一样，就像你发现它正在消耗所有指针事件一样。

我在这里找到了一个似乎实现了我想要的示例，我发现如果我废弃rect并直接调用svg元素上的缩放行为，我仍然会获得子元素的指针事件。

我是这里的菜鸟，我真的不明白为什么会这样。我也猜这可能有它自己的后果，例如我猜这会阻止您限制鼠标事件导致缩放的图形区域。您可能会注意到我链接的示例创建了一个子- svg; 我不知道，但也许这是为了解决这个问题。

Answer 2

您可以将 mouseevent 放在用于检测缩放的同一矩形上。如果没有代码示例，很难确定，但我希望您可以按照以下方式做一些事情：

 svg.select("rect.overlay")
     .on("mouseover.tooltip", function() { tooltip.style("display", null); })
     .on("mouseout.tooltip", function() { tooltip.style("display", "none"); })
     .on("mousemove.tooltip", mousemoveFunc);

将“.tooltip”添加到事件中会为事件添加一个命名空间，因此如果您最终与缩放侦听器发生任何冲突，您也可以向它们添加一个命名空间。