search

d3 / d3-zoom

Pan and zoom SVG, HTML or Canvas using mouse or touch input.
https://d3js.org/d3-zoom
ISC License
502 stars 143 forks source link

d3-zoom and d3-tip #182

Closed enheit closed 4 years ago

enheit commented 4 years ago

Do you have any example of usage d3-zoom in conjunction with d3-tip?

In most examples of d3-zoom it suggests to use "transparent rect" over your chart which will be listening to zoom events. But unfortunately, it ("transparent rect") blocks all events and all underlying elements are not accessible.

Is there any approach to avoid this issue?

mbostock commented 4 years ago

d3-tip is a third-party module (i.e., not maintained by me). I don’t maintain any examples using d3-tip, so no.

As for a general strategy of having interactive elements inside a zoomable container, that works fine as long as you apply the zoom behavior to the elements’ container rather than using a transparent overlay. See these examples:

https://observablehq.com/@d3/zoom-with-tooltip https://observablehq.com/@d3/drag-zoom