D3:如何在单个图表中处理缩放和工具提示? [英] D3: How to handle zooming and tooltips in a single chart?

问题描述

我有一个可视化视图，本质上是一系列堆叠的条形图，每个条形图都包含多个面板.例如，此处是三个这样的条形图，每个都有四个面板.

I have a visualization that is essentially a series of stacked bar charts, each of which contains several panels. For example, here are three such bar charts, each with four panels.

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

I have managed to implement pan/zoom functionality that is coordinated across the charts. This is what it looks like if I zoom into the third panel from the last image, for example. The zoom behavior is called from an invisible rectangle that is placed over each chart.

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

My problem is that I want to enable tooltip functionality based on the location of the user's cursor within a plot. Since the zoom-rectangles are placed on top of the charts, however, no mouse events are registered for any SVG elements in the actual charts themselves.

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

Des anyone know a way around this?

推荐答案

我正在关注麦克·博斯托克的例子，就像您在整个图表上放置rect然后在其上调用缩放行为一样，就像您发现它正在消耗所有指针事件一样.

I was following Mike Bostock's example, and like you placing a rect across my whole chart and then calling the zoom behaviour on that, and like you found that it was consuming all the pointer events.

我在这里找到了一个示例，似乎可以达到我想要的目的，我发现如果我取消rect并只是直接调用svg元素的缩放行为，我仍然会获得子元素的指针事件.

I found an example here that seemed to be achieving what I wanted, and I found that if I scrap the rect and just call the zoom behaviour on the svg element directly, I still get pointer events for the child elements.

我在这里是菜鸟，我不太了解为什么这样做.我也猜想这可能会有自己的影响，例如我想这会阻止您限制鼠标事件引起缩放的图形区域.您可能会注意到，我链接的示例创建了一个 sub -svg；我不知道，但这也许是为了解决这个问题.

I'm a noob here, I don't really understand why this works. I also guess this might have its own ramifications e.g. I guess this stops you limiting the area of your graphic in which mouse events cause a zoom. You may notice that the example I linked creates a sub-svg; I don't know, but perhaps this is to solve that problem.

这篇关于D3:如何在单个图表中处理缩放和工具提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！