I did it a few months ago without prior knowledge of d3, and little knowledge of React. I tried to keep it simple and have as much manual control as possible, s

I did it a few months ago without prior knowledge of d3, and little knowledge of React. I tried to keep it simple and have as much manual control as possible, such that I could apply the tips of d3 tutorials. I essentially have a visualization class with an svg, and an update function for all the D3 stuff. The data is handed using props. When the component mounts, or updates I call my own update function which sets the svg size, binds the data, and defines the enter/update/exit actions+transitions. Because I call update in the componentDidUpdate function, I had to catch 'fake' updates where the data hadn't changed, and abstain from state-updates such that I don't end up with infinite update loops. componentDidMount() { this.update(); } componentDidUpdate(prevProps, prevState) { this.update(); } render() { return ( <div ref={this.gridRef} className={"VisContainer"}> <svg className={"VisSVG"} ref={this.svgRef} /> </div> ); } With this rather primitive structure, my biggest problem was with d3. While many tutorial cover the enter/update/exit model, they often don't go in-depth wth the key-function of the data binding. Probably because they often use date of form list<int> for their tutorial. In my case I had more complex data such that I needed to have efficient updates, using the filter function of d3.