### Basic React Force Graph Example

Source: https://vasturiano.github.io/react-force-graph/index

Demonstrates the fundamental setup and usage of the React Force Graph component for rendering a force-directed graph.

```html
<script src="https://unpkg.com/react-force-graph"></script>
<script>
  // Example usage of React Force Graph
  const MyGraph = ForceGraph()
    .graphData({
      nodes: [{ id: 'a', name: 'Node A' }, { id: 'b', name: 'Node B' }],
      links: [{ source: 'a', target: 'b', name: 'Link A-B' }]
    });

  // Render the graph (assuming a DOM element with id='graph-container')
  document.getElementById('graph-container').appendChild(MyGraph);
</script>
```

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

### Input JSON Syntax

Source: https://vasturiano.github.io/react-force-graph/index

Example of the expected JSON structure for defining nodes and links in the graph.

```javascript
{
  "nodes": [
    {"id": "id1", "name": "name1", "val": 1},
    {"id": "id2", "name": "name2", "val": 10},
    ...
  ],
  "links": [
    {"source": "id1", "target": "id2"},
    ...
  ]
}
```

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

### Basic Force Graph Usage

Source: https://vasturiano.github.io/react-force-graph/index

A simple example of rendering a Force Graph component with graph data.

```html
<ForceGraph3D
  graphData={myData}
/>
```

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

### AR Graph Integration

Source: https://vasturiano.github.io/react-force-graph/index

Shows an example of integrating the force graph into an Augmented Reality (AR) environment, likely using WebXR.

```html
<script src="https://unpkg.com/react-force-graph"></script>
<script>
  // This example likely involves setting up a WebXR scene and rendering the graph within it.
  // Specific implementation details would depend on the AR framework used.
  const graph = ForceGraph()
    .graphData({
      nodes: [{ id: 'a' }, { id: 'b' }],
      links: [{ source: 'a', target: 'b' }]
    });

  // AR integration code would go here, likely involving a canvas and AR session management.
  // document.getElementById('ar-container').appendChild(graph);
</script>
```

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

### Importing Force Graph Components

Source: https://vasturiano.github.io/react-force-graph/index

Demonstrates how to import the different Force Graph components (2D, 3D, VR, AR) for use in a React project.

```javascript
import ForceGraph2D from 'react-force-graph-2d';
import ForceGraph3D from 'react-force-graph-3d';
import ForceGraphVR from 'react-force-graph-vr';
import ForceGraphAR from 'react-force-graph-ar';
```

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

### Including Force Graph via Script Tag

Source: https://vasturiano.github.io/react-force-graph/index

Shows how to include the react-force-graph libraries using script tags for direct use in HTML.

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

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

### Highlight Nodes and Links

Source: https://vasturiano.github.io/react-force-graph/index

Demonstrates how to highlight specific nodes and links on hover or selection, improving user interaction and focus.

```html
<script src="https://unpkg.com/react-force-graph/dist/force-graph.min.js"></script>
<script>
  const fg = ForceGraph()
    .graphData({
      nodes: [{ id: 'a' }, { id: 'b' }],
      links: [{ source: 'a', target: 'b' }]
    })
    .onNodeHover(node => {
      fg.nodeHighlight(node);
      fg.linkHighlight(node.links);
    })
    .onLinkHover(link => {
      fg.linkHighlight(link);
      fg.nodeHighlight(link.source);
      fg.nodeHighlight(link.target);
    });

  document.getElementById('graph-container').appendChild(fg);
</script>
```

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

### Camera Automatic Orbitting

Source: https://vasturiano.github.io/react-force-graph/index

Demonstrates how to set up an automatic orbiting camera movement around the graph in 3D space, creating an animated viewing experience.

```html
<script src="https://unpkg.com/react-force-graph/dist/force-graph.min.js"></script>
<script>
  const fg = ForceGraph3D()
    .graphData({
      nodes: [{ id: 'a' }, { id: 'b' }],
      links: [{ source: 'a', target: 'b' }]
    });

  document.getElementById('graph-container').appendChild(fg);

  // Orbit controls setup (requires a camera and renderer)
  const OrbitControls = require('three/examples/jsm/controls/OrbitControls');
  const controls = new OrbitControls(fg.camera(), fg.renderer().domElement);
  controls.enableDamping = true;
  controls.dampingFactor = 0.1;
  controls.screenSpacePanning = false;
  controls.minDistance = 10;
  controls.maxDistance = 100;

  // Animation loop for orbitting
  fg.onEngineTick(() => {
    controls.update();
  });
</script>
```

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

### Managing Lights and Post-Processing

Source: https://vasturiano.github.io/react-force-graph/index

Allows for the management of lights within the scene and access to the post-processing composer for applying visual effects. The composer can be extended with various rendering passes.

```APIDOC
lights: ([_array_]) | Getter/setter for the list of lights to use in the scene. Each item should be an instance of [Light](https://threejs.org/docs/#api/en/lights/Light).

postProcessingComposer: [_object_] | Access the [post-processing composer](https://threejs.org/docs/#examples/en/postprocessing/EffectComposer). Use this to add post-processing [rendering effects](https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing) to the scene. By default the composer has a single pass ([RenderPass](https://github.com/mrdoob/three.js/blob/dev/examples/jsm/postprocessing/RenderPass.js)) that directly renders the scene without any effects.
```

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

### Larger Graph Performance

Source: https://vasturiano.github.io/react-force-graph/index

Demonstrates techniques and configurations for rendering and interacting with significantly larger graphs efficiently.

```html
<script src="https://unpkg.com/react-force-graph/dist/force-graph.min.js"></script>
<script>
  // For larger graphs, consider optimizations like WebGL rendering (ForceGraph3D)
  // and potentially data aggregation or simplification strategies.
  const fg = ForceGraph3D()
    .graphData({
      // ... large dataset ...
    })
    .nodeRelSize(4) // Adjust node size for better visibility in large graphs
    .linkWidth(0.5);

  document.getElementById('graph-container').appendChild(fg);
</script>
```

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

### Auto-Colored Nodes and Links

Source: https://vasturiano.github.io/react-force-graph/index

Demonstrates how to automatically assign colors to nodes and links based on their properties or data, simplifying visual differentiation.

```html
<script src="https://unpkg.com/react-force-graph"></script>
<script>
  const graph = ForceGraph()
    .graphData({
      nodes: [{ id: 'a', group: 1 }, { id: 'b', group: 2 }],
      links: [{ source: 'a', target: 'b', group: 1 }]
    })
    .nodeColor(d => d.group === 1 ? 'red' : 'blue')
    .linkWidth(1)
    .linkDirectionalParticles(1);

  document.getElementById('graph-container').appendChild(graph);
</script>
```

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

### Image Nodes

Source: https://vasturiano.github.io/react-force-graph/index

Shows how to use images as node representations in the force graph, allowing for richer visual content.

```html
<script src="https://unpkg.com/react-force-graph/dist/force-graph.min.js"></script>
<script>
  const fg = ForceGraph()
    .graphData({
      nodes: [{ id: 'a', img: 'path/to/image.png' }, { id: 'b', img: 'path/to/another.png' }],
      links: [{ source: 'a', target: 'b' }]
    })
    .nodeCanvasObject((node, ctx, globalScale) => {
      const img = new Image();
      img.src = node.img;
      const size = 12;
      ctx.drawImage(img, node.x - size/2, node.y - size/2, size, size);
    });

  document.getElementById('graph-container').appendChild(fg);
</script>
```

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

### Dynamic Data Changes

Source: https://vasturiano.github.io/react-force-graph/index

Shows how to update the graph data dynamically after initial rendering, allowing for real-time data visualization.

```html
<script src="https://unpkg.com/react-force-graph/dist/force-graph.min.js"></script>
<script>
  const fg = ForceGraph()
    .graphData({
      nodes: [{ id: 'a' }, { id: 'b' }],
      links: [{ source: 'a', target: 'b' }]
    });

  document.getElementById('graph-container').appendChild(fg);

  // Example of adding a new node and link after 3 seconds
  setTimeout(() => {
    const newData = {
      nodes: [...fg.graphData().nodes, { id: 'c' }],
      links: [...fg.graphData().links, { source: 'b', target: 'c' }]
    };
    fg.graphData(newData);
  }, 3000);
</script>
```

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

### Force Engine Configuration Properties

Source: https://vasturiano.github.io/react-force-graph/index

This section details the properties used to configure the force simulation engine. These properties control aspects like the number of dimensions, the simulation engine choice, DAG layout behavior, and specific parameters for d3 and ngraph engines.

```APIDOC
Force Engine Configuration:

Properties:
  numDimensions: number (1, 2, or 3, default: 3)
    Description: Number of dimensions for the force simulation. Not applicable to 2D mode.

  forceEngine: string ('d3' or 'ngraph', default: 'd3')
    Description: Specifies which force-simulation engine to use. Options are 'd3' (using d3-force-3d) or 'ngraph' (using ngraph.forcelayout).

  dagMode: string (default: null)
    Description: Applies layout constraints based on graph directionality for DAG structures. Possible values: 'td', 'bu', 'lr', 'rl', 'zout', 'zin', 'radialout', 'radialin'.

  dagLevelDistance: number (default: auto-derived)
    Description: Distance between graph depths when 'dagMode' is active.

  dagNodeFilter: function (default: node => true)
    Description: A function to filter nodes for DAG layout processing. Returns true to include, false to exclude.

  onDagError: function (default: throws exception)
    Description: Callback invoked if a cycle is encountered during DAG layout processing. Receives the loop segment as an array of node ids.

  d3AlphaMin: number (default: 0)
    Description: Sets the simulation alpha min parameter for d3 engine.

  d3AlphaDecay: number (default: 0.0228)
    Description: Sets the simulation intensity decay parameter for d3 engine.

  d3VelocityDecay: number (default: 0.4)
    Description: Sets the nodes' velocity decay parameter for d3 engine.

  ngraphPhysics: object (default: null)
    Description: Custom physics configuration for ngraph engine, following its configuration object syntax.

  warmupTicks: number (default: 0)
    Description: Number of layout engine cycles to dry-run before rendering.

  cooldownTicks: number (default: Infinity)
    Description: Number of frames to render before stopping the layout engine.

  cooldownTime: number (default: 15000)
    Description: Duration (ms) to render before stopping the layout engine.

  onEngineTick: function (default: null)
    Description: Callback function invoked at every tick of the simulation engine.

  onEngineStop: function (default: null)
    Description: Callback function invoked when the simulation engine stops.
```

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

### API Reference: Data Input Props

Source: https://vasturiano.github.io/react-force-graph/index

Details the properties related to inputting and accessing graph data, including node and link identifiers.

```APIDOC
Prop | Type | Default | Description | 2D | 3D | VR | AR
---|---|---|---|---|---|---|---
**graphData** | _object_ | `{ nodes: [], links: [] }` | Graph data structure (see below for syntax details). Can also be used to apply incremental updates. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark:
**nodeId** | _string_ | `id` | Node object accessor attribute for unique node id (used in link objects source/target). | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark:
**linkSource** | _string_ | `source` | Link object accessor attribute referring to id of source node. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark:
**linkTarget** | _string_ | `target` | Link object accessor attribute referring to id of target node. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark:
```

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

### API Reference: Container Layout Props

Source: https://vasturiano.github.io/react-force-graph/index

Describes properties for controlling the visual dimensions and appearance of the graph container, including background and AR-specific settings.

```APIDOC
Prop | Type | Default | Description | 2D | 3D | VR | AR
---|---|---|---|---|---|---|---
**width** | _number_ | _< window width>_ | Canvas width, in px. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark:
**height** | _number_ | _< window height>_ | Canvas height, in px. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark:
**backgroundColor** | _string_ | (2D - _light_ / 3D - _dark_) | Chart background color. | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | 
**showNavInfo** | _bool_ | `true` | Whether to show the navigation controls footer info. |  | :heavy_check_mark: | :heavy_check_mark: | 
**yOffset** | _number_ | 1.5 | In AR mode, defines the offset distance above the marker where to place the center coordinates `<0,0,0>` of the force directed graph. Measured in terms of marker width units. |  |  |  | :heavy_check_mark:
**glScale** | _number_ | 200 | In AR mode, defines the translation scale between real world distances and WebGL units, determining the overall size of the graph. Defined in terms of how many GL units fit in a full marker width. |  |  |  | :heavy_check_mark:
**markerAttrs** | _object_ | `{ preset: 'hiro' }` | Set of attributes that define the marker where the AR force directed graph is mounted, according to the [a-marker specification](https://ar-js-org.github.io/AR.js-Docs/marker-based/). This prop only has an effect on component mount. |  |  |  | :heavy_check_mark:
```

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

### 3D Text Nodes

Source: https://vasturiano.github.io/react-force-graph/index

Illustrates rendering text labels on nodes within a 3D force graph environment, enhancing the visual presentation in 3D space.

```html
<script src="https://unpkg.com/react-force-graph/dist/force-graph.min.js"></script>
<script>
  const fg = ForceGraph3D()
    .graphData({
      nodes: [{ id: 'a', name: 'Node A' }, { id: 'b', name: 'Node B' }],
      links: [{ source: 'a', target: 'b' }]
    })
    .nodeLabel(d => d.name);

  document.getElementById('graph-container').appendChild(fg);
</script>
```

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

### Text in Links

Source: https://vasturiano.github.io/react-force-graph/index

Shows how to display text labels on the links themselves, providing additional context or information about the connections.

```html
<script src="https://unpkg.com/react-force-graph/dist/force-graph.min.js"></script>
<script>
  const fg = ForceGraph()
    .graphData({
      nodes: [{ id: 'a' }, { id: 'b' }],
      links: [{ source: 'a', target: 'b', name: 'Connection' }]
    })
    .linkLabel(d => d.name);

  document.getElementById('graph-container').appendChild(fg);
</script>
```

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

### Curved Lines and Self Links

Source: https://vasturiano.github.io/react-force-graph/index

Demonstrates how to render curved links and handle self-referencing links (links from a node to itself) for more complex graph visualizations.

```html
<script src="https://unpkg.com/react-force-graph/dist/force-graph.min.js"></script>
<script>
  const fg = ForceGraph()
    .graphData({
      nodes: [{ id: 'a' }, { id: 'b' }],
      links: [{ source: 'a', target: 'b' }, { source: 'a', target: 'a' }]
    })
    .linkCurvature(0.2)
    .linkCurveType('arc');

  document.getElementById('graph-container').appendChild(fg);
</script>
```

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

### Animation and Viewport Control Methods

Source: https://vasturiano.github.io/react-force-graph/index

Methods for controlling the animation cycle, pausing and resuming rendering, and manipulating the viewport. Includes methods for centering the view, zooming, and fitting the graph to the viewport.

```APIDOC
pauseAnimation(): void
  Pauses the rendering cycle of the component, effectively freezing the current view and cancelling all user interaction. This method can be used to save performance in circumstances when a static image is sufficient.

resumeAnimation(): void
  Resumes the rendering cycle of the component, and re-enables the user interaction. This method can be used together with `pauseAnimation` for performance optimization purposes.

centerAt(x: number, y: number, ms: number): void
  Set the coordinates of the center of the viewport. This method can be used to perform panning on the 2D canvas programmatically. Each of the `x, y` coordinates is optional, allowing for motion in just one dimension. An optional 3rd argument defines the duration of the transition (in ms) to animate the canvas motion.

zoom(level: number, ms: number): void
  Set the 2D canvas zoom amount. The zoom is defined in terms of the scale transform of each px. A value of `1` indicates unity, larger values zoom in and smaller values zoom out. An optional 2nd argument defines the duration of the transition (in ms) to animate the canvas motion. By default the zoom is set to a value inversely proportional to the amount of nodes in the system.

zoomToFit(ms: number, padding: number, nodeFilterFn: function): void
  Automatically zooms/pans the canvas so that all of the nodes fit inside it. If no nodes are found no action is taken. It accepts two optional arguments: the first defines the duration of the transition (in ms) to animate the canvas motion (default: 0ms). The second argument is the amount of padding (in px) between the edge of the canvas and the outermost node (default: 10px). The third argument specifies a custom node filter: `node => <boolean>`, which should return a truthy value if the node is to be included. This can be useful for focusing on a portion of the graph.

cameraPosition(position: {x: number, y: number, z: number}, lookAt: {x: number, y: number, z: number}, ms: number): void
  Re-position the camera, in terms of `x`, `y`, `z` coordinates. Each of the coordinates is optional, allowing for motion in just some dimensions. The optional second argument can be used to define the direction that the camera should aim at, in terms of an `{x,y,z}` point in the 3D space. The 3rd optional argument defines the duration of the transition (in ms) to animate the camera motion. A value of 0 (default) moves the camera immediately to the final position. By default the camera will face the center of the graph at a `z` distance proportional to the amount of nodes in the system.
```

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

### Multiple Node Selection

Source: https://vasturiano.github.io/react-force-graph/index

Shows how to enable and manage the selection of multiple nodes simultaneously, facilitating batch operations or analysis.

```html
<script src="https://unpkg.com/react-force-graph/dist/force-graph.min.js"></script>
<script>
  const fg = ForceGraph()
    .graphData({
      nodes: [{ id: 'a' }, { id: 'b' }, { id: 'c' }],
      links: [{ source: 'a', target: 'b' }, { source: 'b', target: 'c' }]
    })
    .nodeId('id')
    .enableNodeDrag(true)
    .onNodeClick(node => {
      // Toggle node selection
      node.selected = !node.selected;
      fg.nodeId(node.id); // Ensure the node is re-rendered
    });

  document.getElementById('graph-container').appendChild(fg);
</script>
```

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

### Custom Pointer Area Painting

Source: https://vasturiano.github.io/react-force-graph/index

Define custom callback functions for painting interaction areas for nodes and links. These areas are invisible but used for pointer detection.

```APIDOC
nodePointerAreaPaint | func | _default interaction area is a circle centered on the node and sized according to`val`._ | Callback function for painting a canvas area used to detect node pointer interactions. The provided paint color uniquely identifies the node and should be used to perform drawing operations on the provided canvas context. This painted area will not be visible, but instead be used to detect pointer interactions with the node. The callback function has the signature: `nodePointerAreaPaint(<node>, <color>, <canvas context>, <current global scale>)`.
```

```APIDOC
linkPointerAreaPaint | func | _default interaction area is a straight line between the source and target nodes._ | Callback function for painting a canvas area used to detect link pointer interactions. The provided paint color uniquely identifies the link and should be used to perform drawing operations on the provided canvas context. This painted area will not be visible, but instead be used to detect pointer interactions with the link. The callback function has the signature: `linkPointerAreaPaint(<link>, <color>, <canvas context>, <current global scale>)`.
```

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

### Pointer Interaction Configuration

Source: https://vasturiano.github.io/react-force-graph/index

Configure mouse tracking events for object hover/click and tooltips. Disabling this can improve performance.

```APIDOC
enablePointerInteraction | bool | true | Whether to enable the mouse tracking events. This activates an internal tracker of the canvas mouse position and enables the functionality of object hover/click and tooltip labels, at the cost of performance. If you’re looking for maximum gain in your graph performance it’s recommended to switch off this property.
```

```APIDOC
enableNodeDrag | bool | true | Whether to enable the user interaction to drag nodes by click-dragging. If enabled, every time a node is dragged the simulation is re-heated so the other nodes react to the changes. Only applicable if enablePointerInteraction is `true`.
```

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

### Zoom and Navigation Controls

Source: https://vasturiano.github.io/react-force-graph/index

Configures zoom and pan interactions, including precision for link hover and the type of navigation controls used in 3D mode.

```APIDOC
linkHoverPrecision: number (default: 4)
  - Determines the precision for link hover detection. Lower values require closer proximity.

onZoom({ k, x, y })
  - Callback function for zoom/pan events. Triggered by user interaction and programmatic calls.
  - Parameters:
    - k: The current zoom factor.
    - x: The current x-translation.
    - y: The current y-translation.

onZoomEnd({ k, x, y })
  - Callback function for the end of zoom/pan events.
  - Parameters:
    - k: The final zoom factor.
    - x: The final x-translation.
    - y: The final y-translation.

controlType: string (default: 'trackball')
  - Specifies the camera control type for 3D mode. Options: 'trackball', 'orbit', 'fly'.

enableZoomInteraction: boolean (default: true)
  - Enables or disables user-initiated zooming on a 2D canvas.

enablePanInteraction: boolean (default: true)
  - Enables or disables user-initiated panning on a 2D canvas.

enableNavigationControls: boolean (default: true)
  - Enables or disables the built-in trackball navigation controls for camera manipulation in 3D mode.
```

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

### Graph Utility Methods

Source: https://vasturiano.github.io/react-force-graph/index

Provides utility functions for interacting with the graph's spatial data, including bounding box calculation and coordinate transformations.

```APIDOC
getGraphBbox | ([_nodeFilterFn_]) | Returns the current bounding box of the nodes in the graph, formatted as `{ x: [<num>, <num>], y: [<num>, <num>], z: [<num>, <num>] }`. If no nodes are found, returns `null`. Accepts an optional argument to define a custom node filter: `node => <boolean>`, which should return a truthy value if the node is to be included. This can be useful to calculate the bounding box of a portion of the graph.
```

```APIDOC
screen2GraphCoords | (_x_ , _y_[, _distance_]) | Utility method to translate viewport coordinates to the graph domain. Given a pair of `x`,`y` screen coordinates, and optionally distance from camera for 3D mode, returns the current equivalent `{x, y (, z)}` in the domain of graph node coordinates.
```

```APIDOC
graph2ScreenCoords | (_x_ , _y_[, _z_]) | Utility method to translate node coordinates to the viewport domain. Given a set of `x`,`y`(,`z`) graph coordinates, returns the current equivalent `{x, y}` in viewport coordinates.
```

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

### Click to Focus on Node

Source: https://vasturiano.github.io/react-force-graph/index

Implements functionality where clicking on a node centers the camera or view on that specific node.

```html
<script src="https://unpkg.com/react-force-graph/dist/force-graph.min.js"></script>
<script>
  const fg = ForceGraph3D()
    .graphData({
      nodes: [{ id: 'a' }, { id: 'b' }, { id: 'c' }],
      links: [{ source: 'a', target: 'b' }, { source: 'b', target: 'c' }]
    })
    .onNodeClick(node => {
      // Aim at node from outside it
      const distance = 40;
      const distRatio = 1 + distance/Math.sqrt(node.x**2 + node.y**2 + node.z**2);

      fg.cameraPosition(
        { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
        node, // lookAt discarded
        3000  // ms
      );
    });

  document.getElementById('graph-container').appendChild(fg);
</script>
```

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

### Click to Expand/Collapse Nodes

Source: https://vasturiano.github.io/react-force-graph/index

Enables interactive expansion and collapse of nodes, useful for hierarchical or grouped data visualizations.

```html
<script src="https://unpkg.com/react-force-graph/dist/force-graph.min.js"></script>
<script>
  // This example requires a data structure that supports hierarchical relationships.
  // The implementation would involve managing node visibility and potentially link visibility based on parent state.
  const fg = ForceGraph()
    .graphData({
      nodes: [{ id: 'a', expanded: true }, { id: 'b', parent: 'a' }, { id: 'c', parent: 'a' }],
      links: [{ source: 'a', target: 'b' }, { source: 'a', target: 'c' }]
    })
    .onNodeClick(node => {
      node.expanded = !node.expanded;
      // Logic to show/hide children based on node.expanded state
      // This might involve updating the graph data or filtering nodes/links.
    });

  document.getElementById('graph-container').appendChild(fg);
</script>
```

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

### React Force Graph Components

Source: https://vasturiano.github.io/react-force-graph/index

This module provides four distinct React components for rendering force-directed graphs: react-force-graph-2d, react-force-graph-3d, react-force-graph-vr, and react-force-graph-ar. Each component offers an identical interface for representing graph data structures in various spatial dimensions using a force-directed layout.

```javascript
import ForceGraph2D from 'react-force-graph-2d';
import ForceGraph3D from 'react-force-graph-3d';
import ForceGraphVR from 'react-force-graph-vr';
import ForceGraphAR from 'react-force-graph-ar';
```

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

### 2D Text Nodes

Source: https://vasturiano.github.io/react-force-graph/index

Demonstrates how to render text labels directly on nodes in a 2D force graph, improving readability and information display.

```html
<script src="https://unpkg.com/react-force-graph/dist/force-graph.min.js"></script>
<script>
  const fg = ForceGraph()
    .graphData({
      nodes: [{ id: 'a', name: 'Node A' }, { id: 'b', name: 'Node B' }],
      links: [{ source: 'a', target: 'b' }]
    })
    .nodeLabel(d => d.name)
    .nodeAutoColorBy('group');

  document.getElementById('graph-container').appendChild(fg);
</script>
```

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

### Accessing and Configuring d3 Forces

Source: https://vasturiano.github.io/react-force-graph/index

Allows access to the internal forces of the d3 simulation engine. You can reconfigure existing forces like 'link', 'charge', and 'center', or add new ones. This functionality is only available when using the d3 simulation engine.

```APIDOC
d3Force:
  (string | Function) Access to the internal forces that control the d3 simulation engine.
  Follows the same interface as d3-force-3d’s simulation.force.
  Three forces are included by default: 'link' (based on forceLink), 'charge' (based on forceManyBody) and 'center' (based on forceCenter).
  Each of these forces can be reconfigured, or new forces can be added to the system.
  Only applicable if using the d3 simulation engine.
```

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

### Directional Moving Particles on Links

Source: https://vasturiano.github.io/react-force-graph/index

Illustrates how to add animated particles that move along the links, providing a visual cue for direction and activity.

```html
<script src="https://unpkg.com/react-force-graph"></script>
<script>
  const graph = ForceGraph()
    .graphData({
      nodes: [{ id: 'a' }, { id: 'b' }],
      links: [{ source: 'a', target: 'b' }]
    })
    .linkDirectionalParticles(2);

  document.getElementById('graph-container').appendChild(graph);
</script>
```

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

### React Force Graph Methods

Source: https://vasturiano.github.io/react-force-graph/index

Methods for controlling graph behavior, such as emitting particles.

```APIDOC
emitParticle:
  - Arguments: (_link_)
  - Description: An alternative mechanism for generating particles, this method emits a non-cyclical single particle within a specific link. The emitted particle shares the styling (speed, shape, color) of the regular particle props. A valid `link` object that is included in `graphData` should be passed as a single parameter.
```

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

### Link Styling Properties

Source: https://vasturiano.github.io/react-force-graph/index

Defines properties for styling links in the force graph, including labels, visibility, color, line styles, and geometric attributes. Supports string, function, number, and array types for customization.

```APIDOC
linkLabel:
  Type: string or func
  Default: `name`
  Description: Link object accessor function or attribute for name (shown in label). Supports plain text or HTML content (except in VR).

linkDesc:
  Type: string or func
  Default: `desc`
  Description: For VR only. Link object accessor function or attribute for description (shown under label).

linkVisibility:
  Type: bool, string or func
  Default: `true`
  Description: Link object accessor function, attribute or a boolean constant for whether to display the link line.

linkColor:
  Type: string or func
  Default: `color`
  Description: Link object accessor function or attribute for line color.

linkAutoColorBy:
  Type: string or func
  Default: (none)
  Description: Link object accessor function or attribute to automatically group colors by. Only affects links without a color attribute.

linkOpacity:
  Type: number
  Default: 0.2
  Description: Line opacity of links, between [0,1].

linkLineDash:
  Type: number[], string or func
  Default: (none)
  Description: Link object accessor function, attribute or number array (e.g. `[5, 15]`) to determine if a line dash should be applied to this rendered link. Refer to the [HTML canvas setLineDash API](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash) for example values. Either a falsy value or an empty array will disable dashing.

linkWidth:
  Type: number, string or func
  Default: 1
  Description: Link object accessor function, attribute or a numeric constant for the link line width.

linkResolution:
  Type: number
  Default: 6
  Description: Geometric resolution of each link 3D line, expressed in how many radial segments to divide the cylinder. Higher values yield smoother cylinders. Applicable only to links with positive width.

linkCurvature:
  Type: number, string or func
  Default: 0
  Description: Link object accessor function, attribute or a numeric constant for the curvature radius of the link line. A value of `0` renders a straight line. `1` indicates a radius equal to half of the line length, causing the curve to approximate a semi-circle. For self-referencing links (`source` equal to `target`) the curve is represented as a loop around the node, with length proportional to the curvature value.

linkCurveRotation:
  Type: number, string or func
  Default: 0
  Description: Link object accessor function, attribute or a numeric constant for the rotation along the line axis to apply to the curve. Has no effect on straight lines. At `0` rotation, the curve is oriented in the direction of the intersection with the `XY` plane. The rotation angle (in radians) will rotate the curved line clockwise around the “start-to-end” axis from this reference orientation.

linkMaterial:
  Type: Material, string or func
  Default: _default link material is[MeshLambertMaterial](https://threejs.org/docs/#api/materials/MeshLambertMaterial) styled according to `color` and `opacity`._
  Description: Link object accessor function or attribute for specifying a custom material to style the graph links with. Should return an instance of [ThreeJS Material](https://threejs.org/docs/#api/materials/Material). If a _falsy_ value is returned, the default material will be used instead for that link.

linkCanvasObject:
  Type: func
  Default: _default 2D link object is a line, styled according to`width` and `color`._
  Description: Callback function for painting a custom canvas object to represent graph links. Should use the provided canvas context attribute to perform drawing operations for each link. The callback function will be called for each link at every frame, and has the signature: `linkCanvasObject(<link>, <canvas context>, <current global scale>)`.
```

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

### Accessing Three.js Components in React Force Graph

Source: https://vasturiano.github.io/react-force-graph/index

Provides access to the internal Three.js scene, camera, renderer, and controls. These getters allow for direct manipulation and inspection of the underlying 3D environment.

```APIDOC
scene: _-_ | Access the internal ThreeJS [Scene](https://threejs.org/docs/#api/scenes/Scene).

camera: _-_ | Access the internal ThreeJS [Camera](https://threejs.org/docs/#api/cameras/PerspectiveCamera).

renderer: _-_ | Access the internal ThreeJS [WebGL renderer](https://threejs.org/docs/#api/renderers/WebGLRenderer).

controls: _-_ | Access the internal ThreeJS controls object.
```

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

### Custom 3D Node Geometries (Three.js)

Source: https://vasturiano.github.io/react-force-graph/index

Details how to render custom 3D geometries for nodes using Three.js in the 3D rendering mode, enabling complex object representations.

```html
<script src="https://unpkg.com/react-force-graph/dist/force-graph.min.js"></script>
<script>
  // This example requires Three.js and specific setup for 3D geometries.
  const fg = ForceGraph3D()
    .graphData({
      nodes: [{ id: 'a', geometry: 'sphere' }, { id: 'b', geometry: 'box' }],
      links: [{ source: 'a', target: 'b' }]
    })
    .nodeThreeObject((node) => {
      let obj;
      if (node.geometry === 'sphere') {
        const sphereGeometry = new THREE.SphereGeometry(5);
        const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
        obj = new THREE.Mesh(sphereGeometry, material);
      } else if (node.geometry === 'box') {
        const boxGeometry = new THREE.BoxGeometry(10, 10, 10);
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        obj = new THREE.Mesh(boxGeometry, material);
      }
      return obj;
    });

  document.getElementById('graph-container').appendChild(fg);
</script>
```

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

### React Force Graph Link Properties

Source: https://vasturiano.github.io/react-force-graph/index

Configuration options for customizing link appearance and behavior, including directional particles.

```APIDOC
linkDirectionalParticleColor:
  - Type: string or function
  - Default: `color`
  - Description: Accessor function or attribute for the directional particles color. Can be a string representing a color or a function that returns a color based on the link object.

linkDirectionalParticleResolution:
  - Type: number
  - Default: 4
  - Description: Geometric resolution of each 3D directional particle, expressed in how many slice segments to divide the circumference. Higher values yield smoother particles.

linkDirectionalParticleCanvasObject:
  - Type: function
  - Description: Callback function for painting custom link particles on a 2D canvas. Should use the provided canvas context attribute to perform drawing operations for each particle. The callback function will be called for each particle in each link at every frame, and has the signature: `linkDirectionalParticleCanvasObject(<x>, <y>, <link>, <canvas context>, <current global scale>)`.

linkDirectionalParticleThreeObject:
  - Type: Object3d, string, or function
  - Description: Accessor function or attribute for a custom 3D object to use in the directional particles. Should return an instance of [ThreeJS Object3d](https://threejs.org/docs/index.html#api/core/Object3D). Activating this will ignore the set values for the particle’s width, color and resolution.
```

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

### HTML in Nodes

Source: https://vasturiano.github.io/react-force-graph/index

Demonstrates embedding custom HTML content within nodes, enabling complex UI elements and interactive components.

```html
<script src="https://unpkg.com/react-force-graph/dist/force-graph.min.js"></script>
<script>
  const fg = ForceGraph()
    .graphData({
      nodes: [{ id: 'a', html: '<div><b>Node A</b><br/>Content</div>' }],
      links: []
    })
    .nodeHtml(d => d.html);

  document.getElementById('graph-container').appendChild(fg);
</script>
```

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

### Background Interaction Callbacks

Source: https://vasturiano.github.io/react-force-graph/index

Defines callback functions for interaction events on the background of the graph, such as clicks and right-clicks.

```APIDOC
onBackgroundClick(event)
  - Callback function for click events on the empty space between nodes and links.
  - Parameters:
    - event: The event object associated with the click.

onBackgroundRightClick(event)
  - Callback function for right-click events on the empty space between nodes and links.
  - Parameters:
    - event: The event object associated with the right-click.
```

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

### Node Collision Detection

Source: https://vasturiano.github.io/react-force-graph/index

Shows how to enable and configure node collision detection to prevent nodes from overlapping visually.

```html
<script src="https://unpkg.com/react-force-graph/dist/force-graph.min.js"></script>
<script>
  const fg = ForceGraph()
    .graphData({
      nodes: [{ id: 'a' }, { id: 'b' }, { id: 'c' }],
      links: [{ source: 'a', target: 'b' }, { source: 'b', target: 'c' }]
    })
    .nodeCollisionDetection(true)
    .nodeCollisionRadius(10); // Radius for collision detection

  document.getElementById('graph-container').appendChild(fg);
</script>
```

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

### Link Three.js Object

Source: https://vasturiano.github.io/react-force-graph/index

Defines how to generate a custom 3D object for rendering graph links. It should return a Three.js Object3d instance. Returning a falsy value will result in the default 3D object being used.

```APIDOC
linkThreeObject: _Object3d_, _string_ or _func_
  Default: _default 3D link object is a line or cylinder, sized according to `width` and styled according to `material`._
  Description: Link object 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 will be used instead for that link.
```

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

### Link Canvas Object Mode

Source: https://vasturiano.github.io/react-force-graph/index

Specifies how custom link painting interacts with the default rendering. Options include 'replace', 'before', and 'after', controlling whether the custom function entirely replaces, precedes, or follows the default drawing logic.

```APIDOC
linkCanvasObjectMode: _string_ or _func_
  Default: 'replace'
  Description: Link object accessor function or attribute for the custom drawing mode. Use in combination with `linkCanvasObject` to specify how to customize links painting. Possible values are:
    - 'replace': the link is rendered using just `linkCanvasObject`.
    - 'before': the link is rendered by invoking `linkCanvasObject` and then proceeding with the default link painting.
    - 'after': `linkCanvasObject` is applied after the default link painting takes place.
  Any other value will be ignored and the default drawing will be applied.
```