Olical/react-faux-dom

d3 complains that ownerDocument is null

Closed this issue · 6 comments

chrisjingram commented

When I try to call .data(data) on the selected faux element, I get an error in the console: Cannot read property 'ownerDocument' of null.

After inspecting the faux element that is created, I think it is because the only item in the _parents array is null. This is fair enough because it technically shouldn't have a parent, but this means that d3 cannot access the parent.

Any ideas? This is the code that is causing the issue:

let faux = ReactFauxDOM.createElement('div');
var graph_container = d3.select(faux);

var svg = graph_container.append("svg")
      .data(data)
      .attr("width", widget_width)
      .attr("height", widget_height)
      .append("g")
      .attr("transform", "translate(" + widget_width / 2 + "," + widget_height / 2 + ")");

I've looked at other issues, and this issue is mentioned here #54 (comment) but doesn't seem to have been addressed anywhere else.

Thanks

Olical commented

Hey there, thanks for the report.

Which version of d3 is this with, because I haven't really looked into v4 support that much. I was under the impression it should work fine though. Is this still a problem for you or did you work around it?

chrisjingram commented

Hey!

I'm using d3 version 4. At the moment it's still not working, so I've had to just put my d3 code in componentDidMount, but really want to get ReactFauxDOM to work because it looks like a much neater way of doing it.

Olical commented

Thanks for the quick response! That's cool, I'm glad you got your code working. I'm sorry it doesn't seem to work with v4, I haven't used it myself since then so I haven't had much desire to spend time working the differences out. Maybe I will some day.

I'm going to close this issue for now but I may well address the v4 issues some day if there's a large calling for it. I'm trying to avoid working on this too much since I don't use it myself or even write JavaScript anymore. So I don't want to risk changing things for the worse.

Sorry for any difficulties caused!

chrisjingram commented

No worries! If I get time I might look into myself and submit a pull request if I work something out!

vladbytex commented

Any updates regarding this issue? I started today to learn how to use D3 with React and I found react-faux-dom to be the best solution. Unfortunately, i get the same error as @chrisjingram.

chrisjingram commented

Hey! I ended up just putting the d3 code in componentDidMount, which works well enough for what I was doing. Sorry I can't be of any more help