3d-force-graph-vr

3D Force-Directed Graph in VR

A web component to represent a graph data structure in virtual reality using a force-directed iterative layout. Uses A-Frame for VR rendering and d3-force-3d for the layout physics engine.

See also the WebGL 3D version, and the A-Frame component version (aframe-forcegraph-component).

Live example: https://bl.ocks.org/vasturiano/972ca4f3e8e074dacf14d7071aad8ef9

Quick start

import ForceGraphVR from '3d-force-graph-vr';

or

var ForceGraphVR = require('3d-force-graph-vr');

or even

<script src="//unpkg.com/3d-force-graph-vr"></script>

then

var myGraph = ForceGraphVR();
myGraph(<myDOMElement>)
    .graphData(<myData>);

API reference

Method	Description	Default
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
backgroundColor([str])	Getter/setter for the chart background color.	#000011
nodeRelSize([num])	Getter/setter for the ratio of node sphere volume (cubic px) per value unit.	4
autoColorBy([str or fn])	Node object accessor function (fn(node)) or attribute (e.g. 'type') to automatically group colors by. Only affects nodes without a color attribute.
nodeId([str]) (alias: idField)	Node object accessor attribute for unique node id (used in link objects source/target).	id
nodeLabel([str or fn]) (alias: nameField)	Node object accessor function or attribute for name (shown in label).	name
nodeDesc([str or fn])	Node object accessor function or attribute for description (shown under label).	desc
nodeVal([num, str or fn]) (alias: valField)	Node object accessor function, attribute or a numeric constant for the node numeric value (affects sphere volume).	val
nodeResolution([num])	Getter/setter for the geometric resolution of each node, expressed in how many slice segments to divide the circumference. Higher values yield smoother spheres.	8
nodeColor([str or fn]) (alias: colorField)	Node object accessor function or attribute for node color (affects sphere color).	color
nodeThreeObject([Object3d, str or fn])	Node object accessor function or attribute for generating a custom 3d object to render as graph nodes. Should return an instance of ThreeJS Object3d. If a falsy value is returned, the default 3d object type will be used instead for that node.	default node object is a sphere, sized according to val and styled according to color.
linkSource([str]) (alias: linkSourceField)	Link object accessor attribute referring to id of source node.	source
linkTarget([str]) (alias: linkTargetField)	Link object accessor attribute referring to id of target node.	target
linkLabel([str or fn])	Link object accessor function or attribute for name (shown in label).	name
linkHoverPrecision([int])	Whether to display the link label when gazing the link closely (low value) or from far away (high value).	2
linkColor([str or fn]) (alias: linkColorField)	Link object accessor function or attribute for line color.	color
linkOpacity([num]) (alias: lineOpacity)	Getter/setter for line opacity of links, between [0,1].	0.2
forceEngine([str])	Getter/setter for which force-simulation engine to use (d3 or ngraph).	d3
d3AlphaDecay([num])	Getter/setter for the simulation intensity decay parameter, only applicable if using the d3 simulation engine.	0.0228
d3VelocityDecay([num])	Getter/setter for the nodes' velocity decay that simulates the medium resistance, only applicable if using the d3 simulation engine.	0.4
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.

Input JSON syntax

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