D3: How to handle zooming and tooltips in a single chart?

Question

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.

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?

Answer 1

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.

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.

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.

Answer 2

In your css put the style ponter-events:none for your zooming rectangles. That way the cursor events will be sensed by the elements blow.