react-force-graph

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 React components with identical interfaces: ForceGraph2D, ForceGraph3D, ForceGraphVR and ForceGraphAR. Each can be used to represent a graph data structure in a 2 or 3-dimensional space using a force-directed iterative layout.

For dependency convenience, all of the components are also available as stand-alone packages: react-force-graph-2d, react-force-graph-3d, react-force-graph-vr and react-force-graph-ar.

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)
• 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)

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

import { ForceGraph2D, ForceGraph3D, ForceGraphVR, ForceGraphAR } from 'react-force-graph';

or using a script tag

then

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"
        },
        ...
    ]
}

Giving Back

If this project has helped you and you'd like to contribute back, you can always buy me a ☕!