Skip to content

rudolphpienaar/3d-force-graph

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

3D Force-Directed Graph

NPM

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

Quick start

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

or

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

or even

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

then

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

API reference

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). Can also be used to apply incremental updates. { 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
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
lineOpacity([num]) Getter/setter for line opacity of links, between [0,1]. 0.2
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.
idField([str]) Node object accessor attribute for unique node id (used in link objects source/target). 'id'
valField([num, str or fn]) Node object accessor function, attribute or a numeric constant for the node numeric value (affects sphere volume). 'val'
nameField([str or fn]) Node object accessor function or attribute for name (shown in label). 'name'
colorField([str or fn]) Node object accessor function or attribute for node color (affects sphere color). 'color'
onNodeClick(fn) Callback function for node clicks. The node object is included as single argument onNodeClick(node). -
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'
linkColorField([str or fn]) Link object accessor function or attribute for line color. 'color'
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.

Input JSON syntax

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

About

3D force-directed graph component using ThreeJS/WebGL

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 85.2%
  • HTML 12.5%
  • CSS 2.3%