Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @sdesalas/3d-force-graph with all npm packages installed. Try it out:

var _3dForceGraph = require("@sdesalas/3d-force-graph")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@sdesalas/3d-force-graph v2.0.10

UI component for a 3D force-directed graph using ThreeJS and ngraph.forcelayout3d layout engine

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.

Quick start

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

API reference

OptionDescriptionDefault
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 unit4
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 nodesource
linkTargetField([str])Link object accessor attribute referring to id of target nodetarget
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 render0
cooldownTicks([int])How many build-in frames to render before stopping and freezing the layout engineInfinity
cooldownTime([num])How long (ms) to render for before stopping and freezing the layout engine15000
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"
        },
        (...)
    ]
}

Local development

npm install
npm run watch
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free