d3.event is null in a ReactJS + d3JS component

Question

I\'m using ReactJS, d3JS and ES6 to create an org chart. I can create the chart and see it. But I want to add the zoom behavior to the chart, so I used

Answer 1

I'm not sure exactly what you're doing, but it smells like you're overthinking it. In theory, the zoom behavior changes ranges of scales.

So all you have to do, is base your visualization on two scales - one for x coordinates, one for y coordinates. Then you tell zoom to change those scales and your visualization changes automagically.

Basically, zooming in just means that x and y map wider. At zoom-level = 1 a conceptual coordinate (0.1, 0.1) maps to, say, (10, 10). When zoom level changes to 2, that same mapping becomes (20, 20). This creates the impression of zooming in.

Here's some old code of mine that uses this principle to create zooming: https://github.com/Swizec/candidate-bucket-chart/blob/169779e110c8825f4545c71ae5845ff7bad4f1f4/src/BubbleChart.jsx

The React itself is a bit outdated by now, and I haven't had time to extrapolate the zooming into a cleaner example project, but I hope it helps.

Remember to forceUpdate because React doesn't know your scales changed.