Closed varghesep closed 8 years ago
The code you reference appears to be general d3 javascript, and the event does not pass through React's event system. This looks like a d3 question, unrelated to React. For this reason, I'm going to close out this issue.
On another note, you should use a ref
to reference a DOM node, NOT selecting by ID. Using things like d3.select("#viewport")
can cause interoperability issues with other components that happen to choose the same ID, and prevent a component from being used multiple times on the same page. Using a ref
will solve these issues.
Others with this issue will surely end up here, so here's an approach that worked for me:
Enter into console and save a global reference to the d3 object:
> window.theD3versionHostingTheEvent = d3;
listener.apply(this, argumentz);
and then choose Step into next function call until you get to the place throwing the error.window.theD3versionHostingTheEvent == d3
If the result is false
, you're definitely running two instances of d3. In my case, it turned out one of the libs I was using had d3 bundled into it.
It's very likely that you're using Babel, which has trouble importing a mutable field from d3 using the import / export syntax.
See this: https://github.com/d3/d3/issues/2733#issuecomment-190743489
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
.
This fixes the issue with d3.js v3.
Hi @jbmusso. Your code doesn't work with d3 v5. It occurs like this error.
Attempted import error: 'event' is not exported from 'd3' (imported as 'currentEvent').
Do you have any solution? Thanks
I am working on a bursh-able parallel coordinates graph with d3 v6 in react. I have the exact same issue: Attempted import error: 'event' is not exported from 'd3-selection' (imported as 'currentEvent').
okay. 1 minute later I appear to have found an answer: like written in this articlelet selected = d3.brushSelection(this);
should fix the problem
Hello i faced the same problem after using
import * as d3 from 'd3';
import {event as currentEvent} from 'd3';
I'm working with react v16 and d3 v7 and i'm using
const me = d3.select(this);
Any help please ?
Hola comunidad! Tengo el mismo problema. Estoy trabajando con "react 17.0.2" y "d3 7.2.0"
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 and drag behavior to the chart, so I used d3.behavior.zoom. I can see the method zoomed is called, but the d3.event is null.
I tried attaching the zoom behavior to the div, svg and g but nothing helps. The zoomed behavior is called but the event is null.
In my ASP.NET project I made sure that I don't have any reference to d3.js other than in the systemJS configuration which many stackoverflow answers mentioned as the issue related to why d3.event is null.
My code is very similar to what is in an example like this https://github.com/Swizec/candidate-bucket-chart/blob/169779e110c8825f4545c71ae5845ff7bad4f1f4/src/BubbleChart.jsx which uses the old version of ReactJS.
This is my systemJS configuration: