Force Layout Configuration Options

This demo demonstrates real-time control over force-directed layout parameters, including node repulsion, line elasticity, collision detection, and layout iteration settings.

Force Layout Configuration Options

Functional Overview

This demo showcases how to dynamically configure and adjust force-directed layout parameters in relation-graph. It provides real-time control over physics-based layout settings including node repulsion, line elasticity, layout iterations, and collision detection.

Implementation of Key Features

1. Force Layout Parameter Configuration

const [myForceLayoutOptions, setMyForceLayoutOptions] = React.useState<MyForceLayoutOptionsProps>({
    force_node_repulsion: 1,      // Repulsion strength between nodes
    force_line_elastic: 1,        // Elastic strength of lines
    maxTractionLength: 400,       // Maximum traction length when line has maximum force
    zeroForceLength: 40,          // Length when line has zero force
    maxRepulsionDistance: 600,    // Distance at which repulsion disappears
    nodeCollisionRadius: 40       // Forced distance between nodes
});

2. Dynamic Layout Options Update

Access the force layout instance through graphInstance.layoutor:

const forceLayout = graphInstance.layoutor as InstanceType<typeof RGLayouts.ForceLayout>;
if (forceLayout) {
    forceLayout.updateOptions(myForceLayoutOptions);
}

3. Layout Control Modes

Configure layout to run continuously or for a fixed number of iterations:

graphInstance.updateOptions({
    layout: {
        layoutName: 'force',
        maxLayoutTimes: layoutForever ? Number.MAX_SAFE_INTEGER : maxLayoutTimes
    }
});

4. Force Weight Configuration

Add custom force_weight property to nodes to influence their positioning in the force layout:

{
    id: 'root',
    text: 'Root',
    force_weight: 600,  // Heavier nodes resist movement more
    width: 80,
    height: 80
}

5. Line Elasticity Control

Set force_elastic property on lines to control their spring-like behavior:

{
    id: 'line-1',
    from: 'a',
    to: 'b',
    force_elastic: 2.5,  // Higher values = stronger attraction
    lineWidth: 0.5 + force_elastic
}

Creative Use Cases

• Social Network Analysis: Adjust repulsion and elasticity to reveal community structures
• Knowledge Graph Visualization: Fine-tune layout to minimize edge crossings
• Organizational Charts: Balance node spacing for hierarchical clarity
• Network Topology Mapping: Optimize layout for telecommunications or infrastructure networks
• Molecular Structure Visualization: Simulate atomic interactions with appropriate force parameters
• Dependency Graph Analysis: Control spacing to highlight critical paths