Multi-Group Center Layout

Complex hierarchical structure using center layout algorithm with multiple levels radiating from central root.

Multi-Group Center Layout

Functional Overview

This demo displays a complex hierarchical structure using the center layout algorithm. It shows multiple levels of subsystems radiating from a central root node, with text displayed on curved lines.

Implementation of Key Features

1. Center Layout Configuration

Configure radial layout from center:

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'center',
        levelGaps: [300, 200, 200]  // Distance between levels
    },
    defaultLineTextOnPath: true,  // Text follows curve
    defaultLineColor: '#000000'
};

2. Hierarchical Data Structure

Organize nodes in multiple levels:

const myJsonData: RGJsonData = {
    rootId: '2',
    nodes: [
        // Level 0: Root
        { id: '2', text: 'ALTXX' },
        // Level 1: Main subsystems
        { id: '3', text: 'CH2 TTN' },
        { id: '4', text: 'CH1 AlCu' },
        { id: '5', text: 'MainFrame' },
        // Level 2: Components
        { id: '14', text: 'ArHigh' },
        { id: '15', text: 'ArLow' },
        // Level 3: Details
        { id: '25', text: '齿轮箱' },
        { id: '26', text: '车门内部人工涂蜡' }
    ],
    lines: [
        { from: '2', to: '5', text: '子系统' },
        { from: '2', to: '3', text: '子系统' },
        { from: '3', to: '21', text: '子系统' },
        { from: '6', to: '13', text: '子系统' },
        { from: '7', to: '25', text: '子系统' }
    ]
};

3. Text on Curved Lines

Enable text to follow line paths:

defaultLineTextOnPath: true

4. Level Gaps Control

Control spacing between hierarchy levels:

layout: {
    layoutName: 'center',
    levelGaps: [300, 200, 200]  // Custom gaps per level
}

5. Simple Node Rendering

Use default node rendering with text:

<RelationGraph options={graphOptions}>
    {/* Default node rendering */}
</RelationGraph>

Creative Use Cases

• System Architecture: Display complex system hierarchies
• Organizational Charts: Show company structures with multiple levels
• Knowledge Graphs: Visualize concept relationships
• Network Topology: Display network infrastructure
• Biological Classifications: Show taxonomic hierarchies
• Product Breakdown: Display product component trees