├── .babelrc
├── .github
└── ISSUE_TEMPLATE
│ ├── bug_report.md
│ └── feature_request.md
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── _config.yml
├── example
├── all-modes
│ └── index.html
├── ar-graph
│ └── index.html
├── auto-colored
│ └── index.html
├── basic
│ └── index.html
├── bloom-effect
│ └── index.html
├── camera-auto-orbit
│ └── index.html
├── click-to-focus
│ └── index.html
├── collision-detection
│ └── index.html
├── curved-links
│ └── index.html
├── custom-node-shape
│ ├── index-canvas.html
│ └── index-three.html
├── datasets
│ ├── blocks.json
│ ├── d3-dependencies.csv
│ ├── forcegraph-dependencies.json
│ ├── miserables.json
│ └── random-data.js
├── directional-links-arrows
│ └── index.html
├── directional-links-particles
│ └── index.html
├── dynamic
│ └── index.html
├── emit-particles
│ └── index.html
├── expandable-nodes
│ └── index.html
├── fit-to-canvas
│ └── index.html
├── fix-dragged-nodes
│ └── index.html
├── forcegraph-dependencies
│ └── index.html
├── highlight
│ └── index.html
├── html-nodes
│ └── index.html
├── img-nodes
│ ├── imgs
│ │ ├── cat.jpg
│ │ ├── dog.jpg
│ │ ├── eagle.jpg
│ │ ├── elephant.jpg
│ │ ├── grasshopper.jpg
│ │ ├── octopus.jpg
│ │ ├── owl.jpg
│ │ ├── panda.jpg
│ │ ├── squirrel.jpg
│ │ ├── tiger.jpg
│ │ └── whale.jpg
│ └── index.html
├── large-graph
│ └── index.html
├── multi-selection
│ └── index.html
├── preview.png
├── text-links
│ └── index-3d.html
├── text-nodes
│ ├── index-2d.html
│ └── index-3d.html
└── tree
│ └── index.html
├── package.json
├── rollup.config.dev.js
├── rollup.config.js
└── src
├── forcegraph-proptypes.js
├── index.d.ts
├── index.js
└── packages
├── react-force-graph-2d
├── index.d.ts
├── index.js
├── package.json
├── rollup.config.dev.js
└── rollup.config.js
├── react-force-graph-3d
├── index.d.ts
├── index.js
├── package.json
├── rollup.config.dev.js
└── rollup.config.js
├── react-force-graph-ar
├── index.d.ts
├── index.js
├── package.json
├── rollup.config.dev.js
└── rollup.config.js
└── react-force-graph-vr
├── index.d.ts
├── index.js
├── package.json
├── rollup.config.dev.js
└── rollup.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["@babel/preset-env", { "modules": false }],
4 | "@babel/preset-react"
5 | ]
6 | }
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 |
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 |
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 |
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 |
26 | **Desktop (please complete the following information):**
27 | - OS: [e.g. iOS]
28 | - Browser [e.g. chrome, safari]
29 | - Version [e.g. 22]
30 |
31 | **Smartphone (please complete the following information):**
32 | - Device: [e.g. iPhone6]
33 | - OS: [e.g. iOS8.1]
34 | - Browser [e.g. stock browser, safari]
35 | - Version [e.g. 22]
36 |
37 | **Additional context**
38 | Add any other context about the problem here.
39 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Feature request
3 | about: Suggest an idea for this project
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 |
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 |
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 |
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/
3 | yarn.lock
4 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | **/node_modules/
2 | yarn.lock
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Vasco Asturiano
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | react-force-graph
2 | =================
3 |
4 | **2D**:
5 | [![NPM package][npm-2d-img]][npm-2d-url]
6 | [![Build Size][build-size-2d-img]][build-size-2d-url]
7 | [![NPM Downloads][npm-downloads-2d-img]][npm-downloads-2d-url]
8 |
9 | **3D**:
10 | [![NPM package][npm-3d-img]][npm-3d-url]
11 | [![Build Size][build-size-3d-img]][build-size-3d-url]
12 | [![NPM Downloads][npm-downloads-3d-img]][npm-downloads-3d-url]
13 |
14 | **VR**:
15 | [![NPM package][npm-vr-img]][npm-vr-url]
16 | [![Build Size][build-size-vr-img]][build-size-vr-url]
17 | [![NPM Downloads][npm-downloads-vr-img]][npm-downloads-vr-url]
18 |
19 | **AR**:
20 | [![NPM package][npm-ar-img]][npm-ar-url]
21 | [![Build Size][build-size-ar-img]][build-size-ar-url]
22 | [![NPM Downloads][npm-downloads-ar-img]][npm-downloads-ar-url]
23 |
24 | 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).
25 |
26 |
27 |
28 |
29 |
30 | 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`.
31 | Each can be used to represent a graph data structure in a 2 or 3-dimensional space using a force-directed iterative layout.
32 |
33 | Uses canvas/WebGL for rendering and [d3-force-3d](https://github.com/vasturiano/d3-force-3d) for the underlying physics engine.
34 | Supports zooming/panning, node dragging and node/link hover/click interactions.
35 |
36 | See also the [react-three-fiber component](https://github.com/vasturiano/r3f-forcegraph).
37 |
38 | ## Examples
39 |
40 | * [Basic](https://vasturiano.github.io/react-force-graph/example/basic/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/basic/index.html))
41 | * [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))
42 | * [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))
43 | * [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))
44 | * [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))
45 | * [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))
46 | * [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))
47 | * [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))
48 | * [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))
49 | * [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))
50 | * [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))
51 | * [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))
52 | * [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))
53 | * [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))
54 | * [Multiple Node Selection](https://vasturiano.github.io/react-force-graph/example/multi-selection/) ([source](https://github.com/vasturiano/react-force-graph/blob/master/example/multi-selection/index.html))
55 | * [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))
56 | * [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))
57 | * [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))
58 | * [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))
59 | * [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))
60 | * [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))
61 | * [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))
62 | * [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))
63 | * [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))
64 | * [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))
65 | * [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))
66 |
67 | ## ❤️ Support This Project
68 |
69 | If you find this module useful and would like to support its development, you can [buy me a ☕](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8¤cy_code=USD&source=url). Your contributions help keep open-source sustainable!
70 | [](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8¤cy_code=USD&source=url)
71 |
72 | ## Quick start
73 |
74 | ```js
75 | import ForceGraph2D from 'react-force-graph-2d';
76 | import ForceGraph3D from 'react-force-graph-3d';
77 | import ForceGraphVR from 'react-force-graph-vr';
78 | import ForceGraphAR from 'react-force-graph-ar';
79 | ```
80 |
81 | or using a *script* tag
82 |
83 | ```html
84 |
85 |
86 |
87 |
88 | ```
89 |
90 | then
91 |
92 | ```jsx
93 |
96 | ```
97 |
98 | ## API reference
99 |
100 | 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.
101 |
102 | ### Data input
103 |
104 | | Prop | Type | Default | Description | 2D | 3D | VR | AR |
105 | | --- | :--: | :--: | --- | :--: | :--: | :--: | :--: |
106 | | 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: |
107 | | 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: |
108 | | 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: |
109 | | 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: |
110 |
111 | ### Container layout
112 |
113 | | Prop | Type | Default | Description | 2D | 3D | VR | AR |
114 | | --- | :--: | :--: | --- | :--: | :--: | :--: | :--: |
115 | | width | number | *<window width>* | Canvas width, in px. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
116 | | height | number | *<window height>* | Canvas height, in px. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
117 | | backgroundColor | string | (2D - light / 3D - dark)| Chart background color. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | |
118 | | showNavInfo | bool | `true` | Whether to show the navigation controls footer info. | | :heavy_check_mark: | :heavy_check_mark: | |
119 | | 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: |
120 | | 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: |
121 | | 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: |
122 |
123 | ### Node styling
124 |
125 | | Prop | Type | Default | Description | 2D | 3D | VR | AR |
126 | | --- | :--: | :--: | --- | :--: | :--: | :--: | :--: |
127 | | 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: |
128 | | 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: |
129 | | 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: | |
130 | | nodeDesc | string or func | `desc` | For VR only. Node object accessor function or attribute for description (shown under label). | | | :heavy_check_mark: | |
131 | | 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: |
132 | | 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: |
133 | | 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: |
134 | | nodeOpacity | number | 0.75 | Nodes sphere opacity, between [0,1]. | | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
135 | | 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: |
136 | | 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(,