Maligosus/react-graph-network

React component for rendering svg graph based on d3-force

React component for rendering svg graph based on d3-force with zoom, node dragging and other preferences.

Usage

Simple case

import React from 'react';
import Graph from 'react-graph-network';

const data = {
  nodes: [
    {id: "HkqEDLvxE"},
    {id: "011jVS4rb"},
    {id: "PXACjDxmR"},
    {id: "kuVISwh7w"},
    {id: "UIEjvLJMd"},
    {id: "ZVi8fWDBx"},
    {id: "H-06WvsfJ"},
    {id: "Fbc9iwnJl"},
  ],
  links: [
    {"source": "HkqEDLvxE", "target": "011jVS4rb"},
    {"source": "011jVS4rb", "target": "PXACjDxmR"},
    {"source": "PXACjDxmR", "target": "kuVISwh7w"},
    {"source": "PXACjDxmR", "target": "Fbc9iwnJl"},
    {"source": "PXACjDxmR", "target": "UIEjvLJMd"},
    {"source": "kuVISwh7w", "target": "UIEjvLJMd"},
    {"source": "UIEjvLJMd", "target": "ZVi8fWDBx"},
    {"source": "ZVi8fWDBx", "target": "H-06WvsfJ"},
    {"source": "H-06WvsfJ", "target": "Fbc9iwnJl"}
  ]
};

const App = () => (
  <div style={{ height: '100vh' }}>
    <Graph data={data} id="graph" />
  </div>
);

export default App;

Advanced case

Try different preferences on demo page with Leo Tolstoy family tree data.

Props

Name	Type	Default	Description
data	object		Must have links and nodes props. Each node must have id prop. Each link must have source and target props with id as values.
id	string	GraphTree_container	Provide id if you need more than 1 graph.
nodeDistance	number	100	The more value is, the more is distance between nodes.
NodeComponent	node		Has to be svg element. Will receive concrete node prop from your data.
LineComponent	node		Has to be <line /> tag. Will receive concrete link prop from your data as id and as object it point to.
enableDrag	bool	false	Enable nodes dragging.
pullIn	bool	false	When enableDrag, stretch nodes back.
zoomDepth	number	0	Zooming on scroll wheel. 1 will just enable dragging graph area.
hoverOpacity	number	1	When hover on node all other nodes will have this value as opacity. Needs to be from 0 to 1.

LineComponent

You need to apply all rest props on your <line> tag. If you have specific logic in your Line component be sure to handle link prop both as id and object. See details and example on demo project.

data example

const data = {
    nodes: [
        {id: "HkqEDLvxE"},
        {id: "011jVS4rb"},
        {id: "PXACjDxmR"},
        {id: "kuVISwh7w"},
    ],
    links: [
        {"source": "HkqEDLvxE", "target": "011jVS4rb"},
        {"source": "HkqEDLvxE", "target": "PXACjDxmR"},
        {"source": "kuVISwh7w", "target": "011jVS4rb"},
        {"source": "kuVISwh7w", "target": "PXACjDxmR"},
        {"source": "011jVS4rb", "target": "PXACjDxmR"}
    ]
};