d3 complains that ownerDocument is null
Closed this issue · 6 comments
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
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?
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.
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!
No worries! If I get time I might look into myself and submit a pull request if I work something out!
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.
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