An open source library for using D3 in React
Today I am releasing, along with Daniel Joon Lee and David Loyst, the React D3 Library. It’s a tool that aims to simplify the process of using D3 and React together.
https://github.com/react-d3-library/react-d3-library
If you have tried to use D3 within a React application before you know that it is not a simple task. The problem is how they each interact with the DOM. D3, like jQuery, selects elements directly on the DOM and modifies them. React has a completely different process. It first creates a virtual DOM and then uses a diffing algorithm to determine if the DOM needs to update.
So why use both? React is very powerful for creating responsive complex single page applications that are easy to maintain. D3 more specifically is concerned with making elaborate interactive data visualizations like charts and graphs. Since these visualizations often have complex animations React can’t really compete with its power in this one area.
The way the React D3 Library works is the user first gives D3 a generic DOM element to work with rather than an element on the actual DOM.
Then this element is passed to the library’s custom React Component as state. The component maps out a tree of child elements and builds an object of the HTML data from D3. Then as child elements mount both references to the tree and data object are passed down.
This will work with all static D3 code, including code with event listeners. If the code has more complex functionality, like transitions and timers, that should begin as soon as the elements mount. Users of the library only have to take one extra step. All of this functionality has to be placed in a on ‘mount’ event listener. Although it is a little more work to do this it is well worth it. Complex animations are taxing on the browser, and if every single frame needs to be run through the virtual DOM, performance with suffer. This way elements are first mounted to the DOM through React, and can then benefit from React’s Lifecycle methods like componentWillUnmount. But D3 will temporary be given access to the DOM after they have mounted, to directly apply the complex transitions, animations, etc.
This my first major open source project and I would be thrilled with any feedback. So if you check it out please let me know what you think!
