react-force-graph ================= [![NPM package][npm-img]][npm-url] [![NPM Downloads][npm-downloads-img]][npm-downloads-url] React bindings for the **force-graph** [suite](https://vasturiano.github.io/react-force-graph/example/forcegraph-dependencies) of components: [force-graph](https://github.com/vasturiano/force-graph) (2D HTML Canvas), [3d-force-graph](https://github.com/vasturiano/3d-force-graph) (ThreeJS/WebGL), [3d-force-graph-vr](https://github.com/vasturiano/3d-force-graph-vr) (A-Frame) and [3d-force-graph-ar](https://github.com/vasturiano/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](https://github.com/vasturiano/d3-force-3d) for the underlying physics engine. Supports zooming/panning, node dragging and node/link hover/click interactions. ## Examples * [Basic](https://vasturiano.github.io/react-force-graph/example/basic/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/basic/index.html)) * [Directional arrows](https://vasturiano.github.io/react-force-graph/example/directional-links-arrows/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/directional-links-arrows/index.html)) * [Directional moving particles](https://vasturiano.github.io/react-force-graph/example/directional-links-particles/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/directional-links-particles/index.html)) * [Auto-colored nodes/links](https://vasturiano.github.io/react-force-graph/example/auto-colored/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/auto-colored/index.html)) * [AR graph](https://vasturiano.github.io/react-force-graph/example/ar-graph/index.html) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/ar-graph/index.html)) * [2D Text nodes](https://vasturiano.github.io/react-force-graph/example/text-nodes/index-2d.html) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/text-nodes/index-2d.html)) * [3D Text nodes](https://vasturiano.github.io/react-force-graph/example/text-nodes/index-3d.html) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/text-nodes/index-3d.html)) * [Image nodes](https://vasturiano.github.io/react-force-graph/example/img-nodes/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/img-nodes/index.html)) * [HTML in nodes](https://vasturiano.github.io/react-force-graph/example/html-nodes/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/html-nodes/index.html)) * [Custom 2D node shapes](https://vasturiano.github.io/react-force-graph/example/custom-node-shape/index-canvas.html) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/custom-node-shape/index-canvas.html)) * [Custom 3D/VR node geometries](https://vasturiano.github.io/react-force-graph/example/custom-node-shape/index-three.html) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/custom-node-shape/index-three.html)) * [Curved lines and self links](https://vasturiano.github.io/react-force-graph/example/curved-links/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/curved-links/index.html)) * [Text in links](https://vasturiano.github.io/react-force-graph/example/text-links/index-3d.html) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/text-links/index-3d.html)) * [Highlight nodes/links](https://vasturiano.github.io/react-force-graph/example/highlight/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/highlight/index.html)) * [Larger graph](https://vasturiano.github.io/react-force-graph/example/large-graph/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/large-graph/index.html)) * [Dynamic data changes](https://vasturiano.github.io/react-force-graph/example/dynamic/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/dynamic/index.html)) * [Click to focus on node](https://vasturiano.github.io/react-force-graph/example/click-to-focus/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/click-to-focus/index.html)) * [Click to expand/collapse nodes](https://vasturiano.github.io/react-force-graph/example/expandable-nodes/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/expandable-nodes/index.html)) * [Fix nodes after dragging](https://vasturiano.github.io/react-force-graph/example/fix-dragged-nodes/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/fix-dragged-nodes/index.html)) * [Fit graph to canvas](https://vasturiano.github.io/react-force-graph/example/fit-to-canvas/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/fit-to-canvas/index.html)) * [Camera automatic orbitting](https://vasturiano.github.io/react-force-graph/example/camera-auto-orbit/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/camera-auto-orbit/index.html)) * [Node collision detection](https://vasturiano.github.io/react-force-graph/example/collision-detection/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/collision-detection/index.html)) * [Emit link particles on demand](https://vasturiano.github.io/react-force-graph/example/emit-particles/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/emit-particles/index.html)) * [Force-directed tree (DAG mode)](https://vasturiano.github.io/react-force-graph/example/tree/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/tree/index.html)) * [Bloom Post-Processing Effect](https://vasturiano.github.io/react-force-graph/example/bloom-effect/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/bloom-effect/index.html)) ## Quick start ```js 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 ```js import { ForceGraph2D, ForceGraph3D, ForceGraphVR, ForceGraphAR } from 'react-force-graph'; ``` or using a *script* tag ```html ``` then ```jsx ``` ## 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 | Prop | Type | Default | Description | 2D | 3D | VR | AR | | --- | :--: | :--: | --- | :--: | :--: | :--: | :--: | | graphData | object | `{ nodes: [], links: [] }` | Graph data structure (see below for syntax details). Can also be used to apply incremental updates. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | | nodeId | string | `id` | Node object accessor attribute for unique node id (used in link objects source/target). | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | | linkSource | string | `source` | Link object accessor attribute referring to id of source node. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | | linkTarget | string | `target` | Link object accessor attribute referring to id of target node. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | ### Container layout | Prop | Type | Default | Description | 2D | 3D | VR | AR | | --- | :--: | :--: | --- | :--: | :--: | :--: | :--: | | width | number | *<window width>* | Canvas width, in px. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | | height | number | *<window height>* | Canvas height, in px. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | | backgroundColor | string | (2D - light / 3D - dark)| Chart background color. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | | | showNavInfo | bool | `true` | Whether to show the navigation controls footer info. | | :heavy_check_mark: | :heavy_check_mark: | | | yOffset | number | 1.5 | In AR mode, defines the offset distance above the marker where to place the center coordinates `<0,0,0>` of the force directed graph. Measured in terms of marker width units. | | | | :heavy_check_mark: | | glScale | number | 200 | In AR mode, defines the translation scale between real world distances and WebGL units, determining the overall size of the graph. Defined in terms of how many GL units fit in a full marker width. | | | | :heavy_check_mark: | | markerAttrs | object | `{ preset: 'hiro' }` | Set of attributes that define the marker where the AR force directed graph is mounted, according to the [a-marker specification](https://ar-js-org.github.io/AR.js-Docs/marker-based/). This prop only has an effect on component mount. | | | | :heavy_check_mark: | ### Node styling | Prop | Type | Default | Description | 2D | 3D | VR | AR | | --- | :--: | :--: | --- | :--: | :--: | :--: | :--: | | nodeRelSize | number | 4 | Ratio of node circle area (square px) [2D] or sphere volume (cubic px) [3D] per value unit. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | | nodeVal | number, string or func | `val` | Node object accessor function, attribute or a numeric constant for the node numeric value (affects node size). | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | | nodeLabel | string or func | `name` | Node object accessor function or attribute for name (shown in label). Supports plain text or HTML content (except in VR). | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | | | nodeDesc | string or func | `desc` | For VR only. Node object accessor function or attribute for description (shown under label). | | | :heavy_check_mark: | | | nodeVisibility| bool, string or func | `true` | Node object accessor function, attribute or a boolean constant for whether to display the node. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | | nodeColor | string or func | `color` | Node object accessor function or attribute for node color. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | | nodeAutoColorBy | string or func | | Node object accessor function or attribute to automatically group colors by. Only affects nodes without a color attribute. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | | nodeOpacity | number | 0.75 | Nodes sphere opacity, between [0,1]. | | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | | nodeResolution | number | 8 | Geometric resolution of each node's sphere, expressed in how many slice segments to divide the circumference. Higher values yield smoother spheres. Only applicable to 3D modes. | | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | | nodeCanvasObject | func | *default 2D node object is a circle, sized according to `val` and styled according to `color`.* | Callback function for painting a custom 2D canvas object to represent graph nodes. Should use the provided canvas context attribute to perform drawing operations for each node. The callback function will be called for each node at every frame, and has the signature: `nodeCanvasObject(,

	Stars	Issues	Version	Updated	Created
dagre	4,341	156	0.8.5	4 years ago	12 years ago
react-commits-graph			0.2.0	9 years ago	10 years ago
react-force-graph	1,925	184	1.44.3	3 months ago	6 years ago
react-node-graph	199	26	1.1.1	7 years ago	8 years ago

dagre vs react-commits-graph vs react-force-graph vs react-node-graph

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past