Multi-Group Layout: Center to Force Transition

Functional Overview

This demo demonstrates a dynamic layout transition from center layout to force layout. It shows how to switch between different layout algorithms at runtime for visual effect.

Implementation of Key Features

1. Initial Center Layout

Start with center layout:

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'center',
        distanceCoefficient: 0.5  // Compact spacing
    },
    defaultLineTextOnPath: true,
    defaultLineColor: '#000000'
};

2. Delayed Layout Transition

Switch to force layout after initialization:

const initializeGraph = async () => {
    await graphInstance.setJsonData(myJsonData);
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();

    setTimeout(() => {
        graphInstance.updateOptions({
            layout: {
                layoutName: 'force',
                force_node_repulsion: 0.3,
                force_line_elastic: 5,
                maxLayoutTimes: Number.MAX_SAFE_INFINITY
            }
        });
        graphInstance.doLayout();
    }, 500);
};

3. Force Layout Parameters

Configure force layout for smooth animation:

layout: {
    layoutName: 'force',
    force_node_repulsion: 0.3,    // Low repulsion
    force_line_elastic: 5,         // High elasticity
    maxLayoutTimes: Number.MAX_SAFE_INFINITY  // Continuous
}

4. Same Hierarchical Data

Use the same multi-level data structure:

const myJsonData: RGJsonData = {
    rootId: '2',
    nodes: [/* All nodes from multi-group */],
    lines: [/* All lines from multi-group */]
};

5. Visual Transition Effect

The transition creates an animated effect as nodes move from their radial positions to force-directed positions.

Creative Use Cases

Data Exploration: Show different perspectives on the same data
Presentations: Create engaging visual transitions
Layout Comparison: Compare different layout algorithms
Interactive Visualization: Allow users to switch views
Animation Effects: Create smooth visual transitions
Analysis: Observe how different layouts reveal patterns

Multiple Relationship Networks 3

Multi-Group: Center to Force Transition