react-graph-network

React component for rendering svg graph based on d3-force

Usage no npm install needed!

<script type="module">
  import reactGraphNetwork from 'https://cdn.skypack.dev/react-graph-network';
</script>

README

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

Usage

Simple case

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"}
    ]
};