https://github.com/sdesalas/3d-force-graph

3D force-directed graph component using ThreeJS/WebGL
https://github.com/sdesalas/3d-force-graph

Last synced: 5 days ago
JSON representation

3D force-directed graph component using ThreeJS/WebGL

• Host: GitHub
• URL: https://github.com/sdesalas/3d-force-graph
• Owner: sdesalas
• License: mit
• Fork: true (vasturiano/3d-force-graph)
• Created: 2017-05-27T05:23:19.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-10T06:56:59.000Z (over 6 years ago)
• Last Synced: 2024-04-16T04:55:46.675Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 823 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - sdesalas/3d-force-graph - 3D force-directed graph component using ThreeJS/WebGL (others)

README

        
# 3D Force-Directed Graph

[![NPM](https://nodei.co/npm/3d-force-graph.png?compact=true)](https://nodei.co/npm/3d-force-graph/)

A web component to represent a graph data structure in a 3-dimensional space using a force-directed iterative layout.

Uses [ThreeJS](https://github.com/mrdoob/three.js/)/WebGL for 3D rendering and either [d3-force-3d](https://github.com/vasturiano/d3-force-3d) or [anvaka](https://github.com/anvaka)'s [ngraph](https://github.com/anvaka/ngraph.forcelayout3d) for the underlying physics engine.

This is the rendering engine used in [Botbrains](https://github.com/sdesalas/botbrains)

![shaper.png](https://raw.githubusercontent.com/sdesalas/botbrains/master/shaper.png)

## Quick start

```

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

```

or

```

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

```

or even

```

```

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*](https://github.com/vasturiano/d3-force-3d) or [*ngraph*](https://github.com/anvaka/ngraph.forcelayout)) | 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

```