### Get Graph Bounding Box

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/README.md

Returns the bounding box of nodes in the graph. Accepts an optional node filter function to calculate the bounding box of a subset of the graph.

```javascript
graph.getGraphBbox(node => node.val > 5)
```

--------------------------------

### Initialize 3D Force Graph with Image Nodes

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/example/img-nodes/index.html

Sets up a ForceGraphVR instance and customizes node rendering to display images. Ensure the 'imgs' array contains valid image paths and the '3d-graph' element exists in the HTML.

```javascript
const imgs = ['cat.jpg', 'dog.jpg', 'eagle.jpg', 'elephant.jpg', 'grasshopper.jpg', 'octopus.jpg', 'owl.jpg', 'panda.jpg', 'squirrel.jpg', 'tiger.jpg', 'whale.jpg']; // Random connected graph
const gData = {
  nodes: imgs.map((img, id) => ({ id, img })),
  links: [...Array(imgs.length).keys()]
    .filter(id => id)
    .map(id => ({ source: id, target: Math.round(Math.random() * (id - 1)) }))
};

const Graph = new ForceGraphVR(document.getElementById('3d-graph'))
  .nodeThreeObject(({ img }) => {
    const imgTexture = new THREE.TextureLoader().load(`./imgs/${img}`);
    const material = new THREE.SpriteMaterial({ map: imgTexture });
    const sprite = new THREE.Sprite(material);
    sprite.scale.set(12, 12);
    return sprite;
  })
  .graphData(gData);
```

--------------------------------

### Initialize Force Graph VR with Auto Coloring

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/example/auto-colored/index.html

Sets up a Force Graph VR instance and configures automatic coloring for nodes and links based on their 'group' property. Use this to visually distinguish different node categories.

```javascript
const NODES = 300;
const GROUPS = 12;
const gData = {
  nodes: [...Array(NODES).keys()].map(i => ({ id: i, group: Math.ceil(Math.random() * GROUPS) })),
  links: [...Array(NODES).keys()]
    .filter(id => id)
    .map(id => ({ source: id, target: Math.round(Math.random() * (id - 1)) }))
}

const Graph = new ForceGraphVR(document.getElementById('3d-graph'))
  .nodeAutoColorBy('group')
  .linkAutoColorBy(d => gData.nodes[d.source].group)
  .linkOpacity(0.5)
  .graphData(gData);
```

--------------------------------

### Initialize Graph and Emit Particles

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/example/emit-particles/index.html

Sets up the ForceGraphVR instance, configures particle appearance, and adds an event listener to emit particles on button click. Ensure the '3d-graph' element exists in your HTML.

```javascript
const N = 50;
const gData = {
  nodes: [...Array(N).keys()].map(i => ({ id: i })),
  links: [...Array(N).keys()]
    .filter(id => id)
    .map(id => ({ source: id, target: Math.round(Math.random() * (id - 1)) }))
};

const Graph = new ForceGraphVR(document.getElementById('3d-graph'))
  .linkDirectionalParticleColor(() => 'red')
  .linkDirectionalParticleWidth(4)
  .graphData(gData);

document.getElementById('emit-particles-btn').addEventListener('click', () => {
  [...Array(10).keys()].forEach(() => {
    const link = gData.links[Math.floor(Math.random() * gData.links.length)];
    Graph.emitParticle(link);
  });
});
```

--------------------------------

### Initialize ForceGraphVR with SpriteText Labels

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/example/text-nodes/index.html

Use this snippet to set up a ForceGraphVR instance and display custom text labels on nodes. Requires the ForceGraphVR and SpriteText libraries. Ensure the target DOM element exists.

```javascript
import SpriteText from "https://esm.sh/three-spritetext";

const Graph = new ForceGraphVR(document.getElementById('3d-graph'))
  .jsonUrl('../datasets/miserables.json')
  .nodeAutoColorBy('group')
  .nodeThreeObject(node => {
    const sprite = new SpriteText(node.id);
    sprite.color = node.color;
    sprite.textHeight = 8;
    return sprite;
  });
```

--------------------------------

### Initialize and Update ForceGraphVR

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/example/updating/index.html

Initializes the ForceGraphVR with sample data and sets up an interval to continuously add new nodes and links. This is useful for visualizing streaming data.

```javascript
const initData = { nodes: [
  {id: 0 }
], links: [] };
const Graph = new ForceGraphVR(document.getElementById("3d-graph"))
  .graphData(initData)
  .onNodeClick(removeNode);

setInterval(() => {
  const { nodes, links } = Graph.graphData();
  const id = nodes.length;
  Graph.graphData({
    nodes: [...nodes, { id }],
    links: [...links, { source: id, target: Math.round(Math.random() * (id-1)) }]
  });
}, 1000);
```

--------------------------------

### Initialize ForceGraphVR and Load Data

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/example/text-links/index.html

Initializes the ForceGraphVR instance, loads graph data from a JSON file, and sets basic node and link properties. Ensure the '3d-graph' element exists in your HTML.

```javascript
import SpriteText from "https://esm.sh/three-spritetext";

const Graph = new ForceGraphVR(document.getElementById('3d-graph'))
  .jsonUrl('../datasets/miserables.json')
  .nodeLabel('id')
  .nodeAutoColorBy('group');
```

--------------------------------

### Initialize ForceGraphVR with Random Tree Data

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/example/basic/index.html

This snippet shows how to initialize the ForceGraphVR component and load a dataset representing a random tree. Ensure the '3d-graph' element exists in your HTML.

```javascript
body { margin: 0; }

// Random tree const N = 300;
const gData = {
  nodes: [...Array(N).keys()].map(i => ({ id: i })),
  links: [...Array(N).keys()]
    .filter(id => id)
    .map(id => ({ source: id, target: Math.round(Math.random() * (id - 1)) }))
};

const Graph = new ForceGraphVR(document.getElementById('3d-graph'))
  .graphData(gData);
```

--------------------------------

### Force Engine Configuration Methods

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/README.md

Methods for configuring the force simulation engine and its parameters.

```APIDOC
## forceEngine

### Description
Getter/setter for which force-simulation engine to use. Options are 'd3' or 'ngraph'.

### Method
Getter/Setter

### Parameters
- **engine** (string) - Optional - The force simulation engine to use ('d3' or 'ngraph').

### Response
#### Success Response (200)
- **engine** (string) - The currently set force simulation engine.
```

```APIDOC
## numDimensions

### Description
Getter/setter for the number of dimensions to run the force simulation on.

### Method
Getter/Setter

### Parameters
- **dimensions** (int) - Optional - The number of dimensions (1, 2, or 3).

### Response
#### Success Response (200)
- **dimensions** (int) - The currently set number of dimensions.
```

```APIDOC
## dagMode

### Description
Applies layout constraints based on the graph directionality. Only works correctly for DAG graph structures.

### Method
Getter/Setter

### Parameters
- **mode** (string) - Optional - The DAG layout mode. Choices: 'td', 'bu', 'lr', 'rl', 'zout', 'zin', 'radialout', 'radialin'.

### Response
#### Success Response (200)
- **mode** (string) - The currently set DAG mode.
```

```APIDOC
## dagLevelDistance

### Description
Specifies the distance between different graph depths when `dagMode` is engaged.

### Method
Getter/Setter

### Parameters
- **distance** (num) - Optional - The distance between graph levels.

### Response
#### Success Response (200)
- **distance** (num) - The currently set distance between graph levels.
```

```APIDOC
## dagNodeFilter

### Description
Node accessor function to specify nodes to ignore during DAG layout processing. Excluded nodes will be left unconstrained.

### Method
Getter/Setter

### Parameters
- **filterFn** (fn) - Optional - A function that receives a node object and returns a boolean indicating if the node should be included.

### Response
#### Success Response (200)
- **filterFn** (fn) - The currently set DAG node filter function.
```

```APIDOC
## onDagError

### Description
Callback to invoke if a cycle is encountered while processing the data structure for a DAG layout. The loop segment is included as an array of node ids.

### Method
Getter/Setter

### Parameters
- **callbackFn** (fn) - Optional - The callback function to handle DAG errors.

### Response
#### Success Response (200)
- **callbackFn** (fn) - The currently set DAG error callback function.
```

```APIDOC
## d3AlphaMin

### Description
Getter/setter for the simulation alpha min parameter, only applicable if using the d3 simulation engine.

### Method
Getter/Setter

### Parameters
- **value** (num) - Optional - The alpha min value.

### Response
#### Success Response (200)
- **value** (num) - The currently set alpha min value.
```

```APIDOC
## d3AlphaDecay

### Description
Getter/setter for the simulation intensity decay parameter, only applicable if using the d3 simulation engine.

### Method
Getter/Setter

### Parameters
- **value** (num) - Optional - The alpha decay value.

### Response
#### Success Response (200)
- **value** (num) - The currently set alpha decay value.
```

```APIDOC
## d3VelocityDecay

### Description
Getter/setter for the nodes' velocity decay that simulates medium resistance, only applicable if using the d3 simulation engine.

### Method
Getter/Setter

### Parameters
- **value** (num) - Optional - The velocity decay value.

### Response
#### Success Response (200)
- **value** (num) - The currently set velocity decay value.
```

```APIDOC
## d3Force

### Description
Getter/setter for the internal forces that control the d3 simulation engine. Follows the interface of `d3-force-3d`'s `simulation.force`.

### Method
Getter/Setter

### Parameters
- **name** (str) - The name of the force to get or set.
- **forceFn** (fn) - Optional - The force function to set.

### Response
#### Success Response (200)
- **forceFn** (fn) - The currently set force function for the specified name.
```

```APIDOC
## d3ReheatSimulation

### Description
Reheats the force simulation engine by setting the `alpha` value to `1`. Only applicable if using the d3 simulation engine.

### Method
Invokable

### Response
#### Success Response (200)
- Indicates successful reheating of the simulation.
```

```APIDOC
## ngraphPhysics

### Description
Specify custom physics configuration for ngraph, according to its configuration object syntax. Only applicable if using the ngraph simulation engine.

### Method
Getter/Setter

### Parameters
- **config** (object) - Optional - The ngraph physics configuration object.

### Response
#### Success Response (200)
- **config** (object) - The currently set ngraph physics configuration.
```

```APIDOC
## warmupTicks

### Description
Getter/setter for the number of layout engine cycles to dry-run at ignition before starting to render.

### Method
Getter/Setter

### Parameters
- **ticks** (int) - Optional - The number of warmup ticks.

### Response
#### Success Response (200)
- **ticks** (int) - The currently set number of warmup ticks.
```

```APIDOC
## cooldownTicks

### Description
Getter/setter for how many build-in frames to render before stopping and freezing the layout engine.

### Method
Getter/Setter

### Parameters
- **ticks** (int) - Optional - The number of cooldown ticks.

### Response
#### Success Response (200)
- **ticks** (int) - The currently set number of cooldown ticks.
```

```APIDOC
## cooldownTime

### Description
Getter/setter for how long (in milliseconds) to render for before stopping and freezing the layout engine.

### Method
Getter/Setter

### Parameters
- **time** (num) - Optional - The cooldown time in milliseconds.

### Response
#### Success Response (200)
- **time** (num) - The currently set cooldown time in milliseconds.
```

```APIDOC
## onEngineTick

### Description
Callback function invoked at every tick of the simulation engine.

### Method
Getter/Setter

### Parameters
- **callbackFn** (fn) - The callback function to invoke on each engine tick.

### Response
#### Success Response (200)
- **callbackFn** (fn) - The currently set engine tick callback function.
```

```APIDOC
## onEngineStop

### Description
Callback function invoked when the simulation engine stops and the layout is frozen.

### Method
Getter/Setter

### Parameters
- **callbackFn** (fn) - The callback function to invoke when the engine stops.

### Response
#### Success Response (200)
- **callbackFn** (fn) - The currently set engine stop callback function.
```

```APIDOC
## refresh

### Description
Redraws all the nodes and links in the graph.

### Method
Invokable

### Response
#### Success Response (200)
- Indicates that the graph has been redrawn.
```

--------------------------------

### Initialize ForceGraphVR and Load JSON Data

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/example/async-load/index.html

Initializes the ForceGraphVR instance and loads graph data from a JSON URL. Sets node labels and auto-colors nodes by group.

```javascript
const Graph = new ForceGraphVR(document.getElementById('3d-graph'))
  .jsonUrl('../datasets/miserables.json')
  .nodeLabel('id')
  .nodeAutoColorBy('group');
```

--------------------------------

### Initialize 3D Force Graph VR

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/example/large-graph/index.html

Initializes the ForceGraphVR instance and loads graph data from a JSON URL. It also sets up node auto-coloring based on the 'user' property and defines a custom node label.

```javascript
const elem = document.getElementById('3d-graph');
const Graph = new ForceGraphVR(elem)
  .jsonUrl('../datasets/blocks.json')
  .nodeAutoColorBy('user')
  .nodeLabel(node => `${node.user}: ${node.description}`);
```

--------------------------------

### Initialize Graph with Collision and Box Forces

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/example/collision-detection/index.html

Initializes the ForceGraphVR instance, deactivates default forces, and adds collision and bounding box forces. Ensure d3-force-3d is imported.

```javascript
import { forceCollide } from 'https://esm.sh/d3-force-3d';

const N = 50;
const nodes = [...Array(N).keys()].map(() => ({
  // Initial velocity in random direction
  vx: Math.random(),
  vy: Math.random(),
  vz: Math.random()
}));

const Graph = new ForceGraphVR(document.getElementById('3d-graph'));

Graph.cooldownTime(Infinity)
  .d3AlphaDecay(0)
  .d3VelocityDecay(0)
  // Deactivate existing forces
  .d3Force('center', null)
  .d3Force('charge', null)
  // Add collision and bounding box forces
  .d3Force('collide', forceCollide(Graph.nodeRelSize()))
  .d3Force('box', forceBox(Graph.nodeRelSize() * N));

// Add nodes
Graph.graphData({
  nodes,
  links: []
});
```

--------------------------------

### Initialize Force Graph VR with Custom Node Geometry

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/example/custom-node-geometry/index.html

Initializes a ForceGraphVR instance and customizes node objects using different THREE.js geometries. Ensure the '3d-graph' element exists in your HTML.

```javascript
body { margin: 0; }

// Random tree const N = 100;
const gData = {
  nodes: [...Array(N).keys()].map(i => ({ id: i })),
  links: [...Array(N).keys()]
    .filter(id => id)
    .map(id => ({ source: id, target: Math.round(Math.random() * (id - 1)) }))
};

const Graph = new ForceGraphVR(document.getElementById('3d-graph'))
  .nodeThreeObject(({ id }) => new THREE.Mesh(
    [
      new THREE.BoxGeometry(Math.random() * 20, Math.random() * 20, Math.random() * 20),
      new THREE.ConeGeometry(Math.random() * 10, Math.random() * 20),
      new THREE.CylinderGeometry(Math.random() * 10, Math.random() * 10, Math.random() * 20),
      new THREE.DodecahedronGeometry(Math.random() * 10),
      new THREE.SphereGeometry(Math.random() * 10),
      new THREE.TorusGeometry(Math.random() * 10, Math.random() * 2),
      new THREE.TorusKnotGeometry(Math.random() * 10, Math.random() * 2)
    ][id % 7],
    new THREE.MeshLambertMaterial({ color: Math.round(Math.random() * Math.pow(2, 24)), transparent: true, opacity: 0.75 })
  ))
  .graphData(gData);
```

--------------------------------

### Container Layout Methods

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/README.md

Methods for controlling the dimensions and background of the graph container.

```APIDOC
## width([px])

### Description
Getter/setter for the canvas width.

### Method
GET/SET

### Endpoint
N/A (Method Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **px** (number) - The desired width in pixels.

### Request Example
```javascript
myGraph.width(800); // Sets the canvas width to 800px
```

### Response
#### Success Response (200)
Returns the current canvas width in pixels.

#### Response Example
```json
800
```
```

```APIDOC
## height([px])

### Description
Getter/setter for the canvas height.

### Method
GET/SET

### Endpoint
N/A (Method Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **px** (number) - The desired height in pixels.

### Request Example
```javascript
myGraph.height(600); // Sets the canvas height to 600px
```

### Response
#### Success Response (200)
Returns the current canvas height in pixels.

#### Response Example
```json
600
```
```

```APIDOC
## backgroundColor([str])

### Description
Getter/setter for the chart background color.

### Method
GET/SET

### Endpoint
N/A (Method Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **str** (string) - The desired background color in hexadecimal format (e.g., `#000011`).

### Request Example
```javascript
myGraph.backgroundColor('#FFFFFF'); // Sets the background color to white
```

### Response
#### Success Response (200)
Returns the current background color.

#### Response Example
```json
"#FFFFFF"
```
```

```APIDOC
## showNavInfo([boolean])

### Description
Getter/setter for whether to show the navigation controls footer info.

### Method
GET/SET

### Endpoint
N/A (Method Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **boolean** (boolean) - `true` to show navigation info, `false` to hide.

### Request Example
```javascript
myGraph.showNavInfo(false); // Hides the navigation controls
```

### Response
#### Success Response (200)
Returns the current state of navigation info visibility.

#### Response Example
```json
false
```
```

--------------------------------

### Link Styling Accessors

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/README.md

These methods allow you to define how links are displayed, including their names, descriptions, visibility, color, opacity, and width.

```APIDOC
## linkLabel

### Description
Accessor function or attribute for the link's name, which is shown in the label.

### Method
`linkLabel([str or fn])`

### Default
`name`
```

```APIDOC
## linkDesc

### Description
Accessor function or attribute for the link's description, displayed under the label.

### Method
`linkDesc([str or fn])`

### Default
`desc`
```

```APIDOC
## linkVisibility

### Description
Accessor function, attribute, or boolean constant to control the visibility of the link line. A `false` value maintains the link force without rendering it.

### Method
`linkVisibility([boolean, str or fn])`

### Default
`true`
```

```APIDOC
## linkColor

### Description
Accessor function or attribute for the link's line color.

### Method
`linkColor([str or fn])`

### Default
`color`
```

```APIDOC
## linkAutoColorBy

### Description
Accessor function (`fn(link)`) or attribute (e.g., `'type'`) to automatically group colors by. Only affects links without a specific color attribute.

### Method
`linkAutoColorBy([str or fn])`
```

```APIDOC
## linkOpacity

### Description
Getter/setter for the opacity of links, ranging from 0 (transparent) to 1 (opaque).

### Method
`linkOpacity([num])`

### Default
0.2
```

```APIDOC
## linkWidth

### Description
Accessor function, attribute, or numeric constant for the link line width. A value of zero renders a [ThreeJS Line](https://threejs.org/docs/#api/objects/Line) with a constant width of `1px` regardless of distance. Values are rounded to the nearest decimal for indexing.

### Method
`linkWidth([num, str or fn])`

### Default
0
```

--------------------------------

### Import ForceGraphVR using ES6 Modules

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/README.md

Import the ForceGraphVR component for use in your project. This is the standard method for module-based JavaScript development.

```javascript
import ForceGraphVR from '3d-force-graph-vr';
```

--------------------------------

### Include ForceGraphVR via Script Tag

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/README.md

Include the ForceGraphVR library using a script tag for direct use in HTML. This method is suitable for projects not using module bundlers.

```html
<script src="//cdn.jsdelivr.net/npm/3d-force-graph-vr"></script>
```

--------------------------------

### Data Input Methods

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/README.md

Methods for providing and configuring graph data.

```APIDOC
## graphData([data])

### Description
Getter/setter for graph data structure (see below for syntax details).

### Method
GET/SET

### Endpoint
N/A (Method Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **data** (object) - The graph data structure, typically with `nodes` and `links` arrays.

### Request Example
```json
{
  "nodes": [
    { "id": "node1", "name": "Node 1" },
    { "id": "node2", "name": "Node 2" }
  ],
  "links": [
    { "source": "node1", "target": "node2" }
  ]
}
```

### Response
#### Success Response (200)
Returns the current graph data structure.

#### Response Example
```json
{
  "nodes": [
    { "id": "node1", "name": "Node 1" },
    { "id": "node2", "name": "Node 2" }
  ],
  "links": [
    { "source": "node1", "target": "node2" }
  ]
}
```
```

```APIDOC
## jsonUrl([url])

### Description
URL of JSON file to load graph data directly from, as an alternative to specifying `graphData` directly.

### Method
GET/SET

### Endpoint
N/A (Method Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **url** (string) - The URL of the JSON file containing graph data.

### Request Example
```javascript
myGraph.jsonUrl('data/graph.json');
```

### Response
#### Success Response (200)
Returns the current JSON URL.

#### Response Example
```json
"data/graph.json"
```
```

```APIDOC
## nodeId([str])

### Description
Node object accessor attribute for unique node id (used in link objects source/target).

### Method
GET/SET

### Endpoint
N/A (Method Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **str** (string) - The attribute name used for node IDs.

### Request Example
```javascript
myGraph.nodeId('id'); // Sets the node ID attribute to 'id'
```

### Response
#### Success Response (200)
Returns the current node ID attribute name.

#### Response Example
```json
"id"
```
```

```APIDOC
## linkSource([str])

### Description
Link object accessor attribute referring to id of source node.

### Method
GET/SET

### Endpoint
N/A (Method Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **str** (string) - The attribute name used for link source IDs.

### Request Example
```javascript
myGraph.linkSource('source'); // Sets the link source attribute to 'source'
```

### Response
#### Success Response (200)
Returns the current link source attribute name.

#### Response Example
```json
"source"
```
```

```APIDOC
## linkTarget([str])

### Description
Link object accessor attribute referring to id of target node.

### Method
GET/SET

### Endpoint
N/A (Method Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **str** (string) - The attribute name used for link target IDs.

### Request Example
```javascript
myGraph.linkTarget('target'); // Sets the link target attribute to 'target'
```

### Response
#### Success Response (200)
Returns the current link target attribute name.

#### Response Example
```json
"target"
```
```

--------------------------------

### Configure Directional Particles in Force Graph VR

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/example/directional-links-particles/index.html

Enable directional particles on links and set their speed based on link data. Ensure the dataset includes a 'value' property for each link to control particle speed.

```javascript
const Graph = new ForceGraphVR(document.getElementById('3d-graph'))
  .jsonUrl('../datasets/miserables.json')
  .nodeLabel('id')
  .nodeAutoColorBy('group')
  .linkDirectionalParticles("value")
  .linkDirectionalParticleSpeed(d => d.value * 0.001);
```

--------------------------------

### Include A-Frame Script Tag

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/README.md

Ensure the A-Frame library is loaded in your HTML. This script tag is required for the A-frame VR rendering to function correctly.

```html
<script src="//cdn.jsdelivr.net/npm/aframe"></script>
```

--------------------------------

### Custom Force Box Implementation

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/example/collision-detection/index.html

A custom force function to enforce boundaries within a cubic area. It modifies node velocities to bounce them off the walls.

```javascript
function forceBox(cubeSide) {
  const cubeHalfSide = cubeSide / 2;
  let nodes;

  function force() {
    nodes.forEach(node => {
      const x = node.x || 0,
            y = node.y || 0,
            z = node.z || 0;

      // bounce on box walls
      if (Math.abs(x) > cubeHalfSide) {
        node.vx *= -1;
      }
      if (Math.abs(y) > cubeHalfSide) {
        node.vy *= -1;
      }
      if (Math.abs(z) > cubeHalfSide) {
        node.vz *= -1;
      }
    });
  }

  force.initialize = n => nodes = n;

  return force;
}
```

--------------------------------

### Link Click Events

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/README.md

Handles callback functions for when a user clicks on a link. It provides the clicked link object.

```APIDOC
## onLinkClick([fn])

### Description
Callback function for link click events. The link object is included as sole argument.

### Method
`onLinkClick(callbackFunction)`

### Parameters
#### Callback Function
- **fn** (function) - Optional - The function to be called on link click. Receives `(clickedLink)` as argument.
```

--------------------------------

### Link Hover Events

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/README.md

Handles callback functions for when a user hovers over a link. It provides the hovered link and the previously hovered link.

```APIDOC
## onLinkHover([fn])

### Description
Callback function for link hover events. The link object (or `null` if there's no link directly under the pointer line of sight) is included as the first argument, and the previous link object (or `null`) as second argument.

### Method
`onLinkHover(callbackFunction)`

### Parameters
#### Callback Function
- **fn** (function) - Optional - The function to be called on link hover. Receives `(hoveredLink, previousHoveredLink)` as arguments.
```

--------------------------------

### Node Styling Methods

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/README.md

Methods for customizing the appearance and behavior of nodes in the graph.

```APIDOC
## nodeRelSize([num])

### Description
Getter/setter for the ratio of node sphere volume (cubic px) per value unit.

### Method
GET/SET

### Endpoint
N/A (Method Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **num** (number) - The relative size factor for node spheres.

### Request Example
```javascript
myGraph.nodeRelSize(6); // Increases the relative size of node spheres
```

### Response
#### Success Response (200)
Returns the current node relative size factor.

#### Response Example
```json
6
```
```

```APIDOC
## nodeVal([num, str or fn])

### Description
Node object accessor function, attribute or a numeric constant for the node numeric value (affects sphere volume).

### Method
GET/SET

### Endpoint
N/A (Method Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **num** (number) - A constant numeric value for all nodes.
- **str** (string) - The attribute name on the node object containing the numeric value.
- **fn** (function) - A function that takes a node object and returns its numeric value.

### Request Example
```javascript
myGraph.nodeVal('size'); // Use the 'size' attribute for node values
myGraph.nodeVal(d => d.importance); // Use a function to determine node value
```

### Response
#### Success Response (200)
Returns the current node value accessor.

#### Response Example
```json
"size"
```
```

```APIDOC
## nodeLabel([str or fn])

### Description
Node object accessor function or attribute for name (shown in label).

### Method
GET/SET

### Endpoint
N/A (Method Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **str** (string) - The attribute name on the node object to use for the label.
- **fn** (function) - A function that takes a node object and returns the label string.

### Request Example
```javascript
myGraph.nodeLabel('name'); // Use the 'name' attribute for node labels
myGraph.nodeLabel(node => node.properties.label);
```

### Response
#### Success Response (200)
Returns the current node label accessor.

#### Response Example
```json
"name"
```
```

```APIDOC
## nodeDesc([str or fn])

### Description
Node object accessor function or attribute for description (shown under label).

### Method
GET/SET

### Endpoint
N/A (Method Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **str** (string) - The attribute name on the node object to use for the description.
- **fn** (function) - A function that takes a node object and returns the description string.

### Request Example
```javascript
myGraph.nodeDesc('description'); // Use the 'description' attribute for node descriptions
```

### Response
#### Success Response (200)
Returns the current node description accessor.

#### Response Example
```json
"description"
```
```

```APIDOC
## nodeVisibility([boolean, str or fn])

### Description
Node object accessor function, attribute or a boolean constant for whether to display the node.

### Method
GET/SET

### Endpoint
N/A (Method Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **boolean** (boolean) - A constant boolean value to determine visibility for all nodes.
- **str** (string) - The attribute name on the node object that determines visibility.
- **fn** (function) - A function that takes a node object and returns a boolean indicating visibility.

### Request Example
```javascript
myGraph.nodeVisibility(true); // Show all nodes
myGraph.nodeVisibility('visible'); // Use the 'visible' attribute for node visibility
myGraph.nodeVisibility(node => node.data.active);
```

### Response
#### Success Response (200)
Returns the current node visibility accessor.

#### Response Example
```json
true
```
```

```APIDOC
## nodeColor([str or fn])

### Description
Node object accessor function or attribute for node color (affects sphere color).

### Method
GET/SET

### Endpoint
N/A (Method Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **str** (string) - The attribute name on the node object containing the color value.
- **fn** (function) - A function that takes a node object and returns its color.

### Request Example
```javascript
myGraph.nodeColor('color'); // Use the 'color' attribute for node colors
myGraph.nodeColor(node => node.type === 'company' ? 'blue' : 'red');
```

### Response
#### Success Response (200)
Returns the current node color accessor.

#### Response Example
```json
"color"
```
```

```APIDOC
## nodeAutoColorBy([str or fn])

### Description
Node object accessor function (`fn(node)`) or attribute (e.g. `'type'`) to automatically group colors by. Only affects nodes without a color attribute.

### Method
GET/SET

### Endpoint
N/A (Method Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **str** (string) - The attribute name to group node colors by.
- **fn** (function) - A function that takes a node object and returns a value to group colors by.

### Request Example
```javascript
myGraph.nodeAutoColorBy('group'); // Automatically color nodes based on their 'group' attribute
```

### Response
#### Success Response (200)
Returns the current node auto-color-by accessor.

#### Response Example
```json
"group"
```
```

```APIDOC
## nodeOpacity([num])

### Description
Getter/setter for the nodes sphere opacity, between [0,1].

### Method
GET/SET

### Endpoint
N/A (Method Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **num** (number) - The opacity value, between 0 (transparent) and 1 (opaque).

### Request Example
```javascript
myGraph.nodeOpacity(0.5); // Sets node opacity to 50%
```

### Response
#### Success Response (200)
Returns the current node opacity.

#### Response Example
```json
0.5
```
```

```APIDOC
## nodeResolution([num])

### Description
Getter/setter for the geometric resolution of each node, expressed in how many slice segments to divide the circumference. Higher values yield smoother spheres.

### Method
GET/SET

### Endpoint
N/A (Method Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **num** (number) - The number of segments for node sphere resolution.

### Request Example
```javascript
myGraph.nodeResolution(32); // Increases the smoothness of node spheres
```

### Response
#### Success Response (200)
Returns the current node resolution.

#### Response Example
```json
32
```
```

```APIDOC
## nodeThreeObject([Object3d, str or fn])

### Description
Node object accessor function or attribute for generating a custom 3d object to render as graph nodes. Should return an instance of [ThreeJS Object3d](https://threejs.org/docs/index.html#api/core/Object3D). If a `falsy` value is returned, the default 3d object type will be used instead for that node.

### Method
GET/SET

### Endpoint
N/A (Method Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **Object3d** (THREE.Object3D) - A Three.js Object3D instance to use as the node.
- **str** (string) - The attribute name on the node object containing the 3D object definition.
- **fn** (function) - A function that takes a node object and returns a Three.js Object3D instance.

### Request Example
```javascript
myGraph.nodeThreeObject(node => {
  // Create a custom 3D object (e.g., a cube)
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({ color: node.color });
  return new THREE.Mesh(geometry, material);
});
```

### Response
#### Success Response (200)
Returns the current custom node three object accessor.

#### Response Example
```json
function(node) { ... }
```
```

```APIDOC
## nodeThreeObjectExtend([bool, str or fn])

### Description
Node object accessor function, attribute or a boolean value for whether to replace the default node when using a custom `nodeThreeObject` (`false`) or to extend it (`true`).

### Method
GET/SET

### Endpoint
N/A (Method Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **bool** (boolean) - `true` to extend the default node, `false` to replace it.
- **str** (string) - The attribute name on the node object determining whether to extend.
- **fn** (function) - A function that takes a node object and returns a boolean indicating whether to extend.

### Request Example
```javascript
myGraph.nodeThreeObjectExtend(true); // Extend the default node with custom objects
```

### Response
#### Success Response (200)
Returns the current node three object extend accessor.

#### Response Example
```json
true
```
```

--------------------------------

### Configure Curved Links in ForceGraphVR

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/example/curved-links/index.html

Use `linkCurvature` to control the bend of the link and `linkCurveRotation` to adjust its orientation. `linkDirectionalParticles` adds animated particles to indicate link direction.

```javascript
const gData = { nodes: [...Array(14).keys()].map(i => ({ id: i })), links: [ { source: 0, target: 1, curvature: 0, rotation: 0 }, { source: 0, target: 1, curvature: 0.8, rotation: 0 }, { source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 1 / 6 }, { source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 2 / 6 }, { source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 3 / 6 }, { source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 4 / 6 }, { source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 5 / 6 }, { source: 0, target: 1, curvature: 0.8, rotation: Math.PI }, { source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 7 / 6 }, { source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 8 / 6 }, { source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 9 / 6 }, { source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 10 / 6 }, { source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 11 / 6 }, { source: 2, target: 3, curvature: 0.4, rotation: 0 }, { source: 3, target: 2, curvature: 0.4, rotation: Math.PI / 2 }, { source: 2, target: 3, curvature: 0.4, rotation: Math.PI }, { source: 3, target: 2, curvature: 0.4, rotation: -Math.PI / 2 }, { source: 4, target: 4, curvature: 0.3, rotation: 0 }, { source: 4, target: 4, curvature: 0.3, rotation: Math.PI * 2 / 3 }, { source: 4, target: 4, curvature: 0.3, rotation: Math.PI * 4 / 3 }, { source: 5, target: 6, curvature: 0, rotation: 0 }, { source: 5, target: 5, curvature: 0.5, rotation: 0 }, { source: 6, target: 6, curvature: -0.5, rotation: 0 }, { source: 7, target: 8, curvature: 0.2, rotation: 0 }, { source: 8, target: 9, curvature: 0.5, rotation: 0 }, { source: 9, target: 10, curvature: 0.7, rotation: 0 }, { source: 10, target: 11, curvature: 1, rotation: 0 }, { source: 11, target: 12, curvature: 2, rotation: 0 }, { source: 12, target: 7, curvature: 4, rotation: 0 }, { source: 13, target: 13, curvature: 0.1, rotation: 0 }, { source: 13, target: 13, curvature: 0.2, rotation: 0 }, { source: 13, target: 13, curvature: 0.5, rotation: 0 }, { source: 13, target: 13, curvature: 0.7, rotation: 0 }, { source: 13, target: 13, curvature: 1, rotation: 0 } ] }; const Graph = new ForceGraphVR(document.getElementById('3d-graph')) .linkCurvature('curvature') .linkCurveRotation('rotation') .linkDirectionalParticles(2) .graphData(gData);
```

--------------------------------

### Node Click Events

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/README.md

Handles callback functions for when a user clicks on a node. It provides the clicked node object.

```APIDOC
## onNodeClick([fn])

### Description
Callback function for node click events. The node object is included as sole argument.

### Method
`onNodeClick(callbackFunction)`

### Parameters
#### Callback Function
- **fn** (function) - Optional - The function to be called on node click. Receives `(clickedNode)` as argument.
```

--------------------------------

### Node Hover Events

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/README.md

Handles callback functions for when a user hovers over a node. It provides the hovered node and the previously hovered node.

```APIDOC
## onNodeHover([fn])

### Description
Callback function for node hover events. The node object (or `null` if there's no node directly under the pointer line of sight) is included as the first argument, and the previous node object (or `null`) as second argument.

### Method
`onNodeHover(callbackFunction)`

### Parameters
#### Callback Function
- **fn** (function) - Optional - The function to be called on node hover. Receives `(hoveredNode, previousHoveredNode)` as arguments.
```

--------------------------------

### Custom Link Rendering

Source: https://github.com/vasturiano/3d-force-graph-vr/blob/master/README.md

Utilize custom ThreeJS materials and objects for advanced link rendering.

```APIDOC
## linkMaterial

### Description
Accessor function or attribute for specifying a custom material to style the graph links. Should return an instance of [ThreeJS Material](https://threejs.org/docs/#api/materials/Material). If a falsy value is returned, the default material is used.

### Method
`linkMaterial([Material, str or fn])`

### Default
*default link material is [MeshLambertMaterial](https://threejs.org/docs/#api/materials/MeshLambertMaterial) styled according to `color` and `opacity`.*
```

```APIDOC
## linkThreeObject

### Description
Accessor function or attribute for generating a custom 3D object to render as graph links. Should return an instance of [ThreeJS Object3d](https://threejs.org/docs/index.html#api/core/Object3D). If a falsy value is returned, the default 3D object type is used.

### Method
`linkThreeObject([Object3d, str or fn])`

### Default
*default link object is a line or cylinder, sized according to `width` and styled according to `material`.*
```

```APIDOC
## linkThreeObjectExtend

### Description
Accessor function, attribute, or boolean value indicating whether to replace the default link object when using a custom `linkThreeObject` (`false`) or to extend it (`true`).

### Method
`linkThreeObjectExtend([bool, str or fn])`

### Default
`false`
```

```APIDOC
## linkPositionUpdate

### Description
Getter/setter for a custom function to update link positions on each render. Receives the link's `ThreeJS Object3d`, start/end coordinates (`{x,y,z}`), and link data. If the function returns a truthy value, the regular position update is skipped for that link.

### Method
`linkPositionUpdate([fn(linkObject, { start, end }, link)])`
```