Normal Polygamous Marriage


    2.0.10 • Public • Published

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


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

    or even

    <script src="//"></script>


    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


    npm i @sdesalas/3d-force-graph

    DownloadsWeekly Downloads






    Unpacked Size

    1.84 MB

    Total Files


    Last publish


    • sdesalas