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';

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

| 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"
        },
        (...)
    ]
}

Local development

npm install
npm run watch