12

I'm trying to understand how to integrate D3 and React. Specifically I'm trying to understand how using D3 to render visualizations impacts React. As explained in this excellent question and it's reply:

[...] there is currently no great way to work with React and D3 [...] 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.

The reply goes on to say

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.

What is the impact on React from letting D3 take care of rendering? Will it only impact the performance of the component using D3, or other components as well? Will direct manipulation of the DOM using D3 screw with React's virtual DOM in some way for example? I'm basically trying to get an idea of the price you have to pay for using D3.

langkilde
  • 1,473
  • 1
  • 20
  • 37
  • These two articles may be useful: https://medium.com/@Elijah_Meeks/interactive-applications-with-react-d3-f76f7b3ebc71 https://www.accelebrate.com/blog/the-real-benefits-of-the-virtual-dom-in-react-js/ – Ron Sims II Sep 21 '17 at 21:37

1 Answers1

3

I've worked on a project (private, unfortunately) where I used D3 to represent a UML editor. Everything used SVG manipulation to draw an SVG representing the UML.

The Editor UI logic was implemented in a unique React element (UMLEditor), using TypeScript and D3. You could pass the editor properties to set changes in the UML, and callbacks to get back the data. For instance, you can drag and drop a UML class (in 60fps), but the UI only triggers two events (drag, and drop) to React callbacks.

The key is to have the logic and events separated from the UI manipulation, and have a small amount of big react elements, and not so many small elements.

It could manage a UML with around 4K classes in 30fps.

Edit: Let's define a small application. You have small react components with its children, like the root App element, a Navigation bar, a viewport, etc...

enter image description here

Every element but the UMLEditor have a small impact on the performance. UMLEditor element is a complex element without any React children. Every UI element inside it is rendered using D3. The real DOM of UMLEditor contains a complex SVG element managed entirely using D3.

To make this element interact with React, we pass as props callbacks for events like drag, drop, create new UML class... and one JavaScript class with all the D3 render logic.

We don't pass as prop the entire UML configuration, as it would have a negative impact on the performance. Instead, when we needed it for exporting purposes, the JavaScript class passed as a prop can give the whole UML configuration using a method.

lilezek
  • 6,976
  • 1
  • 27
  • 45
  • thanks for the encouraging example. I'm not sure I understand exactly which component is doing the rendering in your example. Are you saying D3 renders everything based on the props sent to the UMLEditor? Or is it React rendering based on the callbacks? – langkilde Jul 20 '17 at 09:45
  • @langkilde I've edited the answer with more info. If it is yet unclear, let me know. – lilezek Jul 20 '17 at 12:08
  • that's a helpful clarification. I feel it still doesn't quite answer the question of how this impacts React's performance outside of the complex SVG element that you let D3 manage. Is there any impact on the virtual DOM for example? I have a very basic understanding so maybe I'm just not reading your reply properly. – langkilde Jul 21 '17 at 06:26