d3.event is null when used with ReactJS

[varghesep]

I posted a question in the ReactJS about an issue that I have with d3.event which is null. Any feedback is appreciated.

[mbostock]

Sorry, but I don’t know enough about React to say why that would be the case. The d3.event is only defined within the callback of an event listener, so perhaps something is calling your zoomed method outside an event. If you want help debugging, please try Stack Overflow tag d3.js or the d3-js Google group, and I recommend posting a link to a running example (rather than just a code fragment) so that anyone helping can easily open your code in a debugger to reproduce the issue. Good luck.

[jbmusso]

This is most likely related to Babel.
See the following issue on the d3.js repository: https://github.com/d3/d3/issues/2733#issuecomment-190743489
Issue which I cross-posted on the React repository: https://github.com/facebook/react/issues/6641#issuecomment-267365773

I just spent about an hour figuring this.

tldr;

You'll want to change the way you import d3 with the following:

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

And replace all occurences of d3.event with currentEvent.

[aboutaaron]

I had to import d3-selection as suggested in https://github.com/d3/d3/issues/2733#issuecomment-276384072

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