3d-force-graph-vr

To use 3d-force-graph-vr, you must first ensure that A-Frame is loaded in your application. You can then initialize the graph by importing the module or using a script tag, and passing a DOM element to the ForceGraphVR constructor. Use the .graphData() method to provide your graph data.

Requirements:

• A-Frame must be loaded via a script tag for the VR rendering to function.

Steps:

1. Load A-Frame.
2. Load 3d-force-graph-vr.
3. Instantiate ForceGraphVR with a target DOM element.
4. Call .graphData(myData) to render the graph.

<!-- 1. Load A-Frame -->
<script src="//cdn.jsdelivr.net/npm/aframe"></script>

<!-- 2. Load 3d-force-graph-vr -->
<script src="//cdn.jsdelivr.net/npm/3d-force-graph-vr"></script>

<script>
  // 3. Initialize and provide data
  const myGraph = new ForceGraphVR(document.querySelector('#my-element'))
    .graphData(myData);
</script>

Links (lines/cylinders) can be styled using attributes or accessor functions.

Key styling options:

• linkLabel(str|fn): Name shown in the label (default: 'name').
• linkDesc(str|fn): Description shown under the label (default: 'desc').
• linkColor(str|fn): Line color (default: 'color').
• linkOpacity(num): Line opacity between [0, 1] (default: 0.2).
• linkWidth(num|str|fn): Line width. A value of 0 renders a constant 1px ThreeJS Line.
• linkCurvature(num|str|fn): Curvature radius. 0 is straight, 1 is a semi-circle. Positive values curve clockwise, negative counter-clockwise.
• linkMaterial(Material|str|fn): Custom ThreeJS Material. Defaults to MeshLambertMaterial.
• linkThreeObject(Object3d|str|fn): Custom ThreeJS Object3d for the link.
• linkDirectionalArrowLength(num|str|fn): Length of the arrow head indicating direction (default: 0).
• linkDirectionalParticles(num|str|fn): Number of particles traveling along the link to show direction (default: 0).

Nodes can be styled using attributes or accessor functions. Most methods accept a string (attribute name), a number/boolean, or a function fn(node).

Key styling options:

• nodeVal(num|str|fn): Determines the numeric value of a node, which affects its sphere volume (default: 'val').
• nodeLabel(str|fn): The name shown in the label (default: 'name').
• nodeDesc(str|fn): The description shown under the label (default: 'desc').
• nodeColor(str|fn): The color of the sphere (default: 'color').
• nodeAutoColorBy(str|fn): Automatically groups colors by an attribute (e.g., 'type') for nodes without a specific color.
• nodeOpacity(num): Sphere opacity between [0, 1] (default: 0.75).
• nodeResolution(num): Geometric resolution (segments per circumference). Higher is smoother (default: 8).
• nodeThreeObject(Object3d|str|fn): Provide a custom ThreeJS Object3d to render instead of the default sphere.
• nodeThreeObjectExtend(bool|str|fn): If true, the custom object extends the default sphere; if false, it replaces it (default: false).

The graph uses a force-directed simulation. You can choose between d3 and ngraph engines.

Engine Selection:

• forceEngine(str): Set to 'd3' (default) or 'ngraph'.

DAG (Directed Acyclic Graph) Layout: If your graph is a DAG, you can apply layout constraints:

• dagMode(str): Options include 'td' (top-down), 'bu' (bottom-up), 'lr' (left-to-right), 'rl' (right-to-left), 'zout', 'zin', 'radialout', or 'radialin'.
• dagLevelDistance(num): Distance between graph depths.
• dagNodeFilter(fn): Function fn(node) to return true if the node should be included in the DAG layout.
• onDagError(fn): Callback for when a cycle is encountered. By default, this throws an exception.

D3 Specific Configuration (only if forceEngine is 'd3'):

• d3Force(str, [fn]): Configure or add internal forces (e.g., 'link', 'charge', 'center').
• d3AlphaMin(num): Simulation alpha min.
• d3AlphaDecay(num): Simulation intensity decay.
• d3VelocityDecay(num): Medium resistance.
• d3ReheatSimulation(): Resets alpha to 1 to restart simulation.

General Simulation Control:

• warmupTicks(int): Number of dry-run cycles before rendering (default: 0).
• cooldownTicks(int): Number of frames to render before freezing (default: Infinity).
• cooldownTime(num): Time in ms to render before freezing (default: 15000).
• onEngineTick(fn): Called at every tick.
• onEngineStop(fn): Called when the engine stops/freezes.
• refresh(): Redraws all nodes and links.