A web component to represent a graph data structure in a 3-dimensional space using a force-directed iterative layout. Uses ThreeJS/WebGL for 3D rendering and either d3-force-3d or anvaka's ngraph for the underlying physics engine.
See also the VR version.
Live example: http://bl.ocks.org/vasturiano/02affe306ce445e423f992faeea13521
import ForceGraph3D from '3d-force-graph';
or
var ForceGraph3D = require('3d-force-graph');
or even
<script src="//unpkg.com/3d-force-graph/dist/3d-force-graph.min.js"></script>
then
var myGraph = ForceGraph3D();
myGraph(<myDOMElement>)
.graphData(<myData>);
| Method | Description | Default |
|---|---|---|
| width([px]) | Getter/setter for the canvas width | <window width> |
| height([px]) | Getter/setter for the canvas height | <window height> |
| graphData([data]) | Getter/setter for graph data structure (see below for syntax details) | { nodes: [], links: [] } |
| jsonUrl([url]) | URL of JSON file to load graph data directly from, as an alternative to specifying graphData directly | |
| numDimensions([int]) | Getter/setter for number of dimensions to run the force simulation on (1, 2 or 3) | 3 |
| nodeRelSize([num]) | Getter/setter for the ratio of node sphere volume (cubic px) per value unit | 4 |
| lineOpacity([num]) | Getter/setter for line opacity of links, between [0,1] | 0.2 |
| autoColorBy([str]) | Node object accessor attribute to automatically group colors by, only affects nodes without a color attribute | |
| idField([str]) | Node object accessor attribute for unique node id (used in link objects source/target) | id |
| valField([str]) | Node object accessor attribute for node numeric value (affects sphere volume) | val |
| nameField([str]) | Node object accessor attribute for name (shown in label) | name |
| colorField([str]) | Node object accessor attribute for node color (affects sphere color) | color |
| linkSourceField([str]) | Link object accessor attribute referring to id of source node | source |
| linkTargetField([str]) | Link object accessor attribute referring to id of target node | target |
| forceEngine([str]) | Getter/setter for which force-simulation engine to use (d3 or ngraph) | d3 |
| warmupTicks([int]) | Getter/setter for number of layout engine cycles to dry-run at ignition before starting to render | 0 |
| cooldownTicks([int]) | Getter/setter for how many build-in frames to render before stopping and freezing the layout engine | Infinity |
| cooldownTime([num]) | Getter/setter for how long (ms) to render for before stopping and freezing the layout engine | 15000 |
| resetProps() | Reset all component properties to their default value |
{
"nodes": [
{
"id": "id1",
"name": "name1",
"val": 1
},
{
"id": "id2",
"name": "name2",
"val": 10
},
(...)
],
"links": [
{
"source": "id1",
"target": "id2"
},
(...)
]
}
npm install
npm run watch