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

Did you try importing d3 like this instead : import d3 from 'd3';

This issue seems to occur when two occurences of d3 exist in the document.

Answer 2

Quick shot, try this.

    var zoom = d3.behavior.zoom()
        .scaleExtent([1, 10])
        .on("zoom", () => d3.select("#viewport").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");)
        .translate([rootX, rootY]);

If this works, than following should resolve your issue,

var zoom = d3.behavior.zoom()
            .scaleExtent([1, 10])
            .on("zoom", this.zoomed.bind(this))
            .translate([rootX, rootY]);

Answer 3

If you're using React, Babel or Webpack and d3.js v4, it looks like you need to import event from d3-selection in order to use d3.event

import * as d3 from 'd3';
import {event as currentEvent} from 'd3-selection';

You can now use currentEvent the same way you'd use d3.event. See https://github.com/d3/d3/issues/2733 for more information.

Answer 4

If you are importing multiple d3 packages. these packages have a d3 object accessible which might clash with one another. you have to import them with different names.

import d3 from 'd3-selection'
import d3Zoom from 'd3-zoom'
import d3Scale from 'd3-scale'

and have a anonymous function for your callback

.on("zoom", () => d3.select("#viewport")
    .attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
)

Answer 5

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.