JimmyMow/react-d3-graph

Interactive and configurable graphs with react and d3 effortlessly

react-d3-graph ·

📖

Interactive and configurable graphs with react and d3 effortlessly

Playground

Here a live playground page where you can interactively config your own graph, and generate a ready to use configuration! 😎

Documentation 📖

Full documentation here.

Compatibility

• Node version 6.9.x
• React version 15.6.1
• d3 version 4.10.2

Install

npm install react-d3-graph // using npm
yarn add react-d3-graph // using yarn

Usage sample

Graph component is the main component for react-d3-graph components, its interface allows its user to build the graph once the user provides the data, configuration (optional) and callback interactions (also optional). The code for the live example can be consulted here.

import { Graph } from 'react-d3-graph';

// Graph payload (with minimalist structure)
const data = {
    nodes: [
      {id: 'Harry'},
      {id: 'Sally'},
      {id: 'Alice'}
    ],
    links: [
        {source: 'Harry', target: 'Sally'},
        {source: 'Harry', target: 'Alice'},
    ]
};

// The graph configuration
const myConfig = {
    highlightBehavior: true,
    node: {
        color: 'lightgreen',
        size: 120,
        highlightStrokeColor: 'blue'
    },
    link: {
        highlightColor: 'lightblue'
    }
};

// Graph event callbacks
const onClickNode = function(nodeId) {
     window.alert('Clicked node', nodeId);
};

const onMouseOverNode = function(nodeId) {
     window.alert('Mouse over node', nodeId);
};

const onMouseOutNode = function(nodeId) {
     window.alert('Mouse out node', nodeId);
};

const onClickLink = function(source, target) {
     window.alert(`Clicked link between ${source} and ${target}`);
};

<Graph
     id='graph-id' // id is mandatory, if no id is defined rd3g will throw an error
     data={data}
     config={myConfig}
     onClickNode={onClickNode}
     onClickLink={onClickLink}
     onMouseOverNode={onMouseOverNode}
     onMouseOutNode={onMouseOutNode} />

Contributions

Contributions are welcome fell free to submit new ideas/features.