React Component D3 Chart Boiler Plate

Integrating React and D3 for charting I've chosen to let D3 handle the DOM manipulations and use React for passing the updated props. From the research it appears this allows for smoother animations which are easier to create as well. There are a plethora of bl.ocks to give you ideas for animations which would be a pain to create using React as the DOM manipulator.

JMStewart: ReactJS + D3 Force

JMStewart: Pure D3 Force

JMStewart: Canvas + D3 Force

Additionally, the chart operation file exports a #createChart and #updateChart method, which can be switched out to a different framework and tested seperately from your React view.

'use strict';

import React from 'react';  
import { isEqual } from 'underscore';  
import { createChart, updateChart } from './chart-operations';

export default class Chart extends React.Component{

    componentDidMount() {
        const domNode = React.findDOMNode(this);
        createChart(domNode, this.props);
    }

    shouldComponentUpdate(nextProps) {
        return !isEqual(this.props, nextProps);
    }

    componentWillUpdate(nextProps) {
        const domNode = React.findDOMNode(this);
        updateChart(domNode, nextProps);
    }

    render() {
        return (
            <div className="c-chart"></div>
        )
    }
}

We have to use isEqual to compare the nextProps with the current props if any of the props are not a primitive. I generally pass the chartConfig as an object and thus need to compare.

Note: if you're using immutable.js to pass your props to this component you can forgo the #shouldComponentUpdate and #componentWillUpdate methods and just use the following:

componentWillReceiveProps(nextProps) {  
  const domNode = React.findDOMNode(this);
  updateChart(domNode, nextProps);
}

Read more about why here: Advanced React Performance

If you've found a better way of doing this please let me know! :)