event is null when used with react

[benjazehr]

Hi, thx for your work. I really like the look and feel of the annotations and want to use them in my projects. I usually work with react with webpack and babel. But this seems to lead to some problems concerning the editable mode.
When I try to drag an element (clicking on a circle) i get the following error message:

drag.js?71be:10 Uncaught TypeError: Cannot read property 'button' of null at SVGCircleElement.defaultFilter (eval at <anonymous> (bundle.js:5531), <anonymous>:16:70) at SVGCircleElement.mousedowned (eval at <anonymous> (bundle.js:5531), <anonymous>:47:32) at SVGCircleElement.eval (eval at <anonymous> (bundle.js:2179), <anonymous>:29:16)

Looking at the file drag.js in d3-drag/src/ I find this:
function defaultFilter() { return !event.button; }

The issue seems to be related to these issues here:

• d3.event is null in a ReactJS + d3JS component facebook/react#6641
• Having difficulties using d3-zoom with d3 v4.0 d3/d3-zoom#27
• http://stackoverflow.com/questions/37885653/d3-drag-0-3-0-cannot-read-property-button-of-null

But I decided to still write this here because others might run into the same problem.
I have not found a way to get the editable mode running. For now I just configure the annotations by hand in the code. If anyone has an idea how I could get it to work, I'd appreciate it.

[susielu]

Yes I have had other users run into this before, have you tried removing your node modules folder and re-installing them? That has worked for me in the past.

Also make sure all the dependencies are in your package.json

[susielu]

@angelozehr one more ping here until I close this issue. Were you able to resolve this with re-installing the modules?

[benjazehr]

No unfortunately not. In the end I used the annotation without editable mode but just configured all by hand / code.

[namwkim]

The following links might be helpful. Basically, it is likely that somewhere multiple d3-packages are imported. If you import individual packages instead of "import d3 from 'd3';", that would solve the problem. Otherwise, you may want to import event separately like this: "import {event as currentEvent} from 'd3-selection';"

https://stackoverflow.com/questions/36887428/d3-event-is-null-in-a-reactjs-d3js-component

d3/d3#2733

[susielu]

My recommendation is to use react-annotation for this use case.

[samal-rasmussen]

For me it was the same reason as this: d3/d3-selection#185 (comment)

I'm using Yarn and it had added two versions of d3-select. I manually removed one from yarn.lock and then it worked.