Package Exports

3d-force-graph

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (3d-force-graph) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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. A shout-out to anvaka's ngraph for the layout physics engine.

Live example: http://bl.ocks.org/vasturiano/02affe306ce445e423f992faeea13521

Quick start

npm install
npm run build

How to instantiate

import { default as ForceGraph3D } from '3d-force-graph';

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

or even

<script src="/path/to/dist/3d-force-graph.js"></script>

then

var myGraph = ForceGraph3D();
myGraph(<myDOMElement>);

API reference

ForceGraph3D()
     .width(<px>)
     .height(<px>)
     .graphData(<data>)
     .nodeRelSize(<(number) node volume per value unit>)
     .lineOpacity(<between [0,1]>)
     .valAccessor(<function(node) to extract numeric value. default: node.val>)
     .nameAccessor(<function(node) to extract name string. default: node.name>)
     .colorAccessor(<function(node) to extract color hex number. default: node.color>)
     .initialEngineTicks(<number of layout engine cycles to run before start rendering. default: 0>)
     .maxConvergeTime(<ms to stop engine. default: 15000>)
     .maxConvergeFrames(<# frames to stop engine. default: 300>)
     .resetState()

Data syntax

{
    nodes: { 
        id1: { 
          name: "name1",
          val: 1 
        },
        id2: { 
          name: "name2",
          val: 10 
        },
        (...)
    },
    links: [
        ['id1', 'id2'], // [from, to]
        (...)
    ]
}