React-graph-network NPM

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