Olical / react-faux-dom

DOM like structure that renders to React (unmaintained, archived)
http://oli.me.uk/2015/09/09/d3-within-react-the-right-way/
The Unlicense
1.21k stars 87 forks source link

window.document undefined when dispatching event #103

Closed zachbradshaw closed 7 years ago

zachbradshaw commented 7 years ago

Looking for some guidance here, maybe this isn't the library for me, but I'd like to make it work if possible. I'm implementing a collapsible tree chart, similar to this. I've already got a working version that makes an API call on componentDidMount to grab the tree data, but would like to be able to update the tree to show/hide nodes and display different information based on state/props. Anyway, on to the code.

const zoomListener = d3Zoom().scaleExtent([0.1, 1]).on('zoom', zoom);
const faux = this.connectFauxDOM('div.renderedD3', 'chart');

/* pre react-faux-dom
const svg = select(document.getElementsByClassName('target')[0])
    .append('svg')
    .attr('width', '100%')
    .attr('height', '100%')
    .attr('class', 'orgChart')
    .call(zoomListener);
*/ 

const svg = select(faux)
    .append('svg')
    .attr('width', '100%')
    .attr('height', '100%')
    .attr('class', 'orgChart')
    .call(zoomListener);

const g = svg.append('g').dispatch('click') // this line is throwing a TypeError: Cannot read property 'createEvent' of undefined;

Throwing in a breakpoint, the error is happening because window.document is undefined. Which I suppose is to be expected since I'm appending to faux. I can get my initial node to render if I remove the .dispatch('click'). Am I missing something obvious? Or is react-faux-dom not what I'm looking for? Thanks!

zachbradshaw commented 7 years ago

Just had a look at #82 and I think I'm in the same boat, I'm going to go forward with the suggestion from that thread and close this. Thanks.