vasturiano/react-force-graph

react-force-graph

2D:

3D:

VR:

AR:

React bindings for the force-graph suite of components: force-graph (2D HTML Canvas), 3d-force-graph (ThreeJS/WebGL), 3d-force-graph-vr (A-Frame) and 3d-force-graph-ar (AR.js).

This module exports 4 stand-alone React component packages with identical interfaces: react-force-graph-2d, react-force-graph-3d, react-force-graph-vr and react-force-graph-ar. Each can be used to represent a graph data structure in a 2 or 3-dimensional space using a force-directed iterative layout.

Uses canvas/WebGL for rendering and d3-force-3d for the underlying physics engine. Supports zooming/panning, node dragging and node/link hover/click interactions.

See also the react-three-fiber component.

Examples

• Basic (source)
• Directional arrows (source)
• Directional moving particles (source)
• Auto-colored nodes/links (source)
• AR graph (source)
• 2D Text nodes (source)
• 3D Text nodes (source)
• Image nodes (source)
• HTML in nodes (source)
• Custom 2D node shapes (source)
• Custom 3D/VR node geometries (source)
• Curved lines and self links (source)
• Text in links (source)
• Highlight nodes/links (source)
• Multiple Node Selection (source)
• Larger graph (source)
• Dynamic data changes (source)
• Click to focus on node (source)
• Click to expand/collapse nodes (source)
• Fix nodes after dragging (source)
• Fit graph to canvas (source)
• Camera automatic orbitting (source)
• Node collision detection (source)
• Emit link particles on demand (source)
• Force-directed tree (DAG mode) (source)
• Bloom Post-Processing Effect (source)

❤️ Support This Project

If you find this module useful and would like to support its development, you can buy me a ☕. Your contributions help keep open-source sustainable!

Quick start

import ForceGraph2D from 'react-force-graph-2d';
import ForceGraph3D from 'react-force-graph-3d';
import ForceGraphVR from 'react-force-graph-vr';
import ForceGraphAR from 'react-force-graph-ar';

or using a script tag

<script src="//cdn.jsdelivr.net/npm/react-force-graph-2d"></script>
<script src="//cdn.jsdelivr.net/npm/react-force-graph-3d"></script>
<script src="//cdn.jsdelivr.net/npm/react-force-graph-vr"></script>
<script src="//cdn.jsdelivr.net/npm/react-force-graph-ar"></script>

then

<ForceGraph3D
  graphData={myData}
/>

API reference

Note that not all props listed below apply to all 4 components. The last 4 columns in these tables indicate the specific component availability of each prop/method.

Data input

Container layout

Node styling

Link styling

Render control

Force engine configuration

Interaction

Utility

Input JSON syntax

{
    "nodes": [ 
        { 
          "id": "id1",
          "name": "name1",
          "val": 1 
        },
        { 
          "id": "id2",
          "name": "name2",
          "val": 10 
        },
        ...
    ],
    "links": [
        {
            "source": "id1",
            "target": "id2"
        },
        ...
    ]
}