I am trying to adapt a chart that I’ve build in D3 with vanilla JS to a Dash component. The boilerplate and the two charts implemented here helped me a lot, but now I am struggling to add zoom and pan to it.
My starting point can be summarised by this example on Observable: Drag & Zoom / D3 / Observable
I did essentially the same thing in my chart and it worked, but it won’t work in a Dash component: I need to pass somehow the events in React, in the same way as
onClick is passed in both examples mentioned above (the sunburst and the force network).
My question is: what is the simplest approach to make zoom work on these D3 charts? I’ve seen some examples doing it through hooks, but I wonder if there isn’t a solution where the zoom logic (
svg.call(d3.zoom(…) stays in the “D3 script” to follow the logic behind the Dash components.
Any help is appreciated!