D3.zoom in Dash component


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! :smiley: