React + d3js: Use React and parts of d3 or let d3 do it's own thing

Question

After reviewing several blog posts I'm left without a satisfactory answer.

I've seen posts that have react create a component and d3 handles everything inside that component (enter, update, exit) and I've seen posts that recommend having react create and delete nodes inside the SVG and have d3 handle changing attributes on those nodes.

I'm still pretty new to react but I have a ton of d3js experience. Why would I want to give React control of the SVG nodes instead of letting d3 handle the visualization entirely.

What are the pros and cons?

I know that react uses a virtual dom and d3 uses something similar (I think it's called Smash).

For contextual information here are a few blog posts that I'm referencing:

• http://nicolashery.com/integrating-d3js-visualizations-in-a-react-app/
• https://medium.com/@sxywu/on-d3-react-and-a-little-bit-of-flux-88a226f328f3#.3wjjs32q0
• http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/

Answer 1

You are correct in that there is no consensus on this issue. I spent a lot of time investigating this myself a while back and here is my conclusion:

1. if you are just using some basic charting, then there are other libraries created, like victory.js that you can leverage
2. if you do not require anything complex like animation, you can use d3 for the math, but leave the rendering to react
3. if you need to do something more sophisticated, custom, or with animation, let d3 do the work. What I ended up doing was that I had a react component that just had an svg element and received props (both data and action creators) from redux. The component then handled everything else. I had an entire folder structure within that component folder that was dedicated to my various rendering, animation, interaction needs that the component pulled from. You should create interaction functions that fire your action creators and pass whatever information you need, so that you can keep your store up to date and pass new props down as needed. This solution worked perfectly, was highly performant, and lets both libraries do what they are best at. In addition, since you are already comfortable with d3, you dont have to do anything differently than normal. You just end up with a reusable component that takes props and works well in the react ecosystem.