event is null when used with react

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:

• https://github.com/facebook/react/issues/6641
• https://github.com/d3/d3-zoom/issues/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.

[samal-rasmussen]

For me it was the same reason as this: https://github.com/d3/d3-selection/issues/185#issuecomment-419474845

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

[susielu]

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