Force-Directed Physics-Based Layout

Physics simulation layout with node repulsion and edge tension forces, supporting continuous or fixed iterations and real-time parameter adjustment for natural clustering.

Functional Overview

This example demonstrates the force-directed layout algorithm, which simulates physical force fields to naturally arrange nodes. Nodes have repulsion forces between them, while connection lines have elastic tension, achieving automatic layout through the balance of these two forces. The layout can run continuously (infinite iterations) or stop after a specified number of iterations. Users can adjust repulsion and elasticity coefficients in real-time and observe dynamic changes in the graph.

Implementation of Key Features

Force-Directed Layout Configuration

Use force layout type:

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'force',
        maxLayoutTimes: Number.MAX_SAFE_INTEGER  // Run continuously
    }
};

Set maximum iterations to safe integer max for continuous layout.

Dynamic Parameter Adjustment

Update layout parameters in real-time through layoutor instance:

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

This allows adjusting parameters without re-initializing layout.

Layout Duration Control

Choose between continuous layout or fixed iteration count:

const restartForceLayout = async () => {
    graphInstance.updateOptions({
        layout: {
            layoutName: 'force',
            maxLayoutTimes: layoutForever ? Number.MAX_SAFE_INTEGER : maxLayoutTimes
        }
    });
    await graphInstance.doLayout();
};

<SimpleUISelect
    currentValue={layoutForever}
    data={[
        { value: true, text: 'Layout Forever' },
        { value: false, text: `Layout Fixed Times(${maxLayoutTimes})` }
    ]}
    onChange={(newValue: boolean) => { setLayoutForever(newValue); }}
/>

Users can choose continuous optimization or stopping after specified iterations.

Iteration Count Slider

When not using continuous layout, can set fixed iteration count:

<input
    type="range"
    min="10"
    max="1000"
    step="20"
    value={maxLayoutTimes}
    onChange={(event) => { setMaxLayoutTimes(Number(event.target.value)); }}
/>

Range from 10 to 1000, step of 20.

Force Parameters Component

Use MyForceLayoutOptions component for detailed force parameter controls:

<MyForceLayoutOptions
    myOptions={myForceLayoutOptions}
    myOptionsUpdater={setMyForceLayoutOptions}
/>

This component likely contains slider controls for repulsion, elasticity, gravity, and other parameters.

Large Dataset Processing

Example contains substantial data with over 200 nodes:

const rawNodes = [
    { id: 'a', text: 'a' },
    { id: 'b', text: 'b' },
    // ... 200+ nodes
];

const rawLines = [
    { from: 'a', to: 'b' },
    // ... 200+ connections
];

Large datasets demonstrate force-directed layout’s ability to handle complex graphs.

Responsive Parameter Updates

Use useEffect to listen for parameter changes:

useEffect(() => {
    updateMyOptions();
}, [myForceLayoutOptions]);

useEffect(() => {
    restartForceLayout();
}, [maxLayoutTimes, layoutForever]);

Parameter changes automatically update layout behavior.

Creative Use Cases

Social Network Analysis

Visualize large social networks, force-directed layout naturally clusters closely-related people together, forming community structures.

Knowledge Graph Exploration

Display relationships between concepts, similar concepts automatically move closer. Suitable for research and educational tools.

Protein Interaction Networks

In bioinformatics, display protein-protein interactions, helping identify functional modules and pathways.

Citation Network Analysis

Display citation relationships between academic papers or patents, identifying research hotspots and influence networks.

Supply Chain Networks

Visualize supplier, manufacturer, distributor relationships, identifying key supply chain nodes.

Cybersecurity Analysis

Display network devices, servers, attack path relationships, identifying security risk zones.

Financial Market Correlations

Display correlations between stocks, bonds, commodities and other financial instruments, identifying systemic risks.

Software Dependency Analysis

Visualize software module, library, service dependencies, identifying key architectural components.

Social Media Influence

Display user, post, topic interaction relationships, identifying influence nodes and propagation paths.

Brain Neural Networks

Display connections between neurons, helping understand brain function and neural network structure.

Semantic Networks

Display word, concept, entity semantic relationships, used in natural language processing and search engines.

Recommender System Visualization

Display user, item, category relationships, helping understand and optimize recommendation algorithms.