@sdesalas/3d-force-graph NPM

3D Force-Directed Graph

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.

Quick start

import ForceGraph3D from '3d-force-graph';

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(myDOMElement, { width: 500, lineOpacity: 0.5 });

API reference

Option	Description	Default
width(px)	Canvas width	<window width>
height(px)	Canvas height	<window height>
graphData(data)	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)	Number of dimensions to run the force simulation on (1, 2 or 3)	3
nodeRelSize(num)	Ratio of node sphere volume (cubic px) per value unit	4
lineOpacity(num)	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)	Force-simulation engine to use (d3 or ngraph)	d3
warmupTicks(int)	Number of layout engine cycles to dry-run at ignition before starting to render	0
cooldownTicks(int)	How many build-in frames to render before stopping and freezing the layout engine	Infinity
cooldownTime(num)	How long (ms) to render for before stopping and freezing the layout engine	15000
resetProps()	Reset all component properties to their default value

Input JSON syntax

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