ReactJS + D3JS - How does it work !

For all those folks working along with ReactJS and d3JS libraries, this article might be a useful one.

At first, it might be intimidating that how to use d3 with React library in an app since one is a data representation library and one is a rendering library (Too less to say) for JS applications.

• D3 component creation same as that of React components with lifecycle methods.

A simple of D3+ReactJS as follows : -

/**
* Declare a force directed params 
*/
var force = d3
    .layout
    .force()
    .charge(-120)
    .linkDistance(100);

class GraphTemplate extends React.Component {

    constructor(props) {
        super(props);
        this.state = {}
    }
    
    componentWillMount() {
        setTimeout(() => {
            if (force.alpha() >= 0.005) {
                force.on('tick', () => {});
            }
        }, 3000)
    }

    componentDidMount() {
        let { nodes, links } = this.props;  
        force
            .nodes(nodes)
            .links(links)
            .charge(function (d) {
                var charge = -2010;
                if (d.index === 0) {
                    charge = -20100;
                }
                return charge;
            })
            .size([this.props.width, this.props.height]);
            .start();


        _.first(nodes).x = width / 2;
        _.first(nodes).y = height / 2;

    }

    render() {
        var nodes = _.map(this.props.nodes, (node) => {
            var transform = 'translate(' + node.x + ',' + node.y + ')';
            return (
                <g transform={transform}>
                    <circle className="file" r="52" />
                </g>
            );
        });
        var links = _.map(this.props.links, (link) => {
            return (
                <line className='link' key={link.key} strokeWidth={link.size}
                    x1={link.source.x} x2={link.target.x} y1={link.source.y} y2={link.target.y} />
            );
        });

        return (
            <svg width={this.props.width} height={this.props.height}>
                {links}
                {nodes}
            </svg>
        );
    }
}

class GraphReactComp extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            nodes: [{
                id: 1,
                name: "Puja",
                src: "https://avatars0.githubusercontent.com/u/6252327?v=4&s=460",
                opacity: 1,
                emailId: "puja@yopmail.com",
                myKpi: [
                    { kpiId: 10, kpiName: "Rest" },
                    { kpiId: 11, kpiName: "Best" },
                    { kpiId: 12, kpiName: "Gst" }
                ],
                isAnOwner: false
            }, {
                id: 2,
                name: "Nitin",
                src: "https://avatars3.githubusercontent.com/u/2829600?v=4&s=460",
                opacity: 0.5,
                emailId: "nitin@yopmail.com",                
                myKpi: [
                    { kpiId: 13, kpiName: "GHT" },
                    { kpiId: 14, kpiName: "FGS" },
                    { kpiId: 15, kpiName: "EWE" }
                ],
                isAnOwner: false
            }, {
                id: 3,
                name: "Peter",
                src: "https://avatars2.githubusercontent.com/u/110953?v=4&s=460",
                opacity: 0.5,
                emailId: "peter@yopmail.com",                
                myKpi: [
                    { kpiId: 16, kpiName: "HSD" },
                    { kpiId: 17, kpiName: "JSDF" },
                    { kpiId: 18, kpiName: "YWER" }
                ],
                isAnOwner: false
            }, {
                id: 4,
                name: "Webonise",
                src: "https://avatars0.githubusercontent.com/u/6252327?v=4&s=460",
                opacity: 1,
                emailId: "Webonise@yopmail.com",                
                myKpi: [
                    { kpiId: 19, kpiName: "JJJ" },
                    { kpiId: 20, kpiName: "FGG" },
                    { kpiId: 21, kpiName: "oos" }
                ],
                isAnOwner: true
            }],
            links: [{
                source: 1, target: 0
            }, {
                source: 2, target: 0
            }, {
                source: 3, target: 0
            }]
        };
    }

    render() {
        return (
                <GraphTemplate nodes={this.state.nodes} 
                links={this.state.links} width="200" height="400"/>
        );
    }
}

export default GraphReactComp;

In the above example, a component "GraphTemplate" is the one with graph elements, "g" and the child component "circle" which renders a set of nodes with a root node at the center and the child nodes around the root nodes.

The fundamentals for creating d3 react components are same as that of conventional react components with states, props and/or life-cycle methods wherever needed.