All of your D3 will now be compiled into React Elements which allows the ability to use React's diffing algorithm for full optimization
React D3 Library also supports transitions, animations, tooltips, zoom, brush, event listeners, and the list goes on.
It's a simple process to create D3 elements in React and because of this we are able to make contributing or using templates easy.
A library that will allow developers the ability to reroute D3's output to React’s virtual DOM. React-D3-Library will compile your code into React components, and it also comes with a series of D3 template charts converted to React components for developers who are unfamiliar with D3. Not only do we build fully functional React components, but they utilize the power of D3 to automate scaling ranges, normalizing data, and constructing legends.
We are an open source library, so feel free to contribute or post any suggestions/ideas for the library!
First off, install with:
npm install --save react-d3-library
Next, import into your React project:
const rd3 = require('react-d3-library');
import rd3 from 'react-d3-library'
Developers can now take their existing D3 code and use React-D3-Library to create React components. Below is an excerpt of using D3 to create a Bubble Chart with Mike Bostock's D3 code found here.
We need to create a div element for D3 to build upon before converting it to a React component, var div = document.createElement('div'); and this div is what we will have D3 select. We change the selection from d3.select('body') to our new div variable. d3.select(div)
Use the componentDidMount() React lifecycle method to make the state aware of your new D3 div. Then pass the state as props to the react-d3-library Component rd3.Component.
Simple chart templates are also available under the rd3 namespace as shown below
var ScatterPlot = rd3.createScatterPlot;
var PieChart = rd3.createPieChart;
var LineChart = rd3.createLineChart;
var AreaChart = rd3.createAreaChart;
var BarChart = rd3.createBarChart;