How to handle tons of DOM operation from D3 in React to take advantage of its virtualDOM

Question

All:

I am pretty new to React. A lot of posts talking about React's performance virtualDOM, but I guess I did not quite get it, I kinda wondering how to take advantage of this when it comes to data visualization area(especially with lib as D3.js), almost every operation in data visualization is to modify the data which leads to DOM related operation like style changing or number of elements updating.

For example, say I need to build a line chart to show a time series data, each time when I choose another data set, the line need to be recalculated and drawn or add one more line, I wonder in this situation, how React virtualDOM shows a better performance than D3+Angular( I just try to understand which part of virtualDOM improve the performance in this case, or what part is most time consuming when it comes to real DOM operation)?

Thanks

Answer 1

There is currently no great way to work with React and D3. As you seem to have caught on, this is because in the React world you don't do direct DOM manipulation, but in the d3 world that's the only thing you do. In many ways the whole d3 library is built around direct DOM manipulation if you think about how the d3.selection.data function works. There are many libraries that work well when using D3 for it's mathematical capabilities, but none that have fluidly (and with good performance) mixed React with d3 animations. (For that matter, animations in React in general are a pain.)

Some starting points:

1. react-d3 is great for drawing easy charts with React. There is also a similar package, react-d3-basic.
2. react-faux-dom uses a shadow DOM to perform d3 calculations and easy DOM manipulation and then render it out to React, but that doesn't work well with things like Force Layouts since the performance gets bad fast. There is a good blog post on this package.

What you'll notice is that almost all things that are React and d3 are basically just charts. Here is a good example of React and d3 using a Force Layout. However, you'll notice even that small example sometimes doesn't feel fluid.

It seems to me that the current consensus for Force Layouts and the like is to simply drop out of React for those components and let d3 do its thing. This isn't ideal but it's way more performant. I know some people are also investigating the use of react-art for combining React and d3, but I haven't seen a good solution for the Force Layout yet.