Multi-Group Tree Layout (Left-to-Right)

Same hierarchical data using left-to-right tree layout instead of center layout for different visual presentation.

Multi-Group Tree Layout (Left-to-Right)

Functional Overview

This demo uses a left-to-right tree layout to display the same hierarchical structure as the previous demo, but with a different visual arrangement. It shows how the same data can be presented with different layout algorithms.

Implementation of Key Features

1. Left-to-Right Tree Layout

Configure horizontal tree growth:

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'tree',
        from: 'left',
        treeNodeGapH: 100  // Horizontal gap between nodes
    },
    defaultJunctionPoint: RGJunctionPoint.lr,
    defaultLineShape: RGLineShape.StandardCurve,
    defaultLineTextOnPath: true,
    defaultLineColor: '#888888'
};

2. Same Data, Different Layout

Use identical data structure with different layout:

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

3. Junction Point Selection

Use left-right junction points for horizontal layout:

defaultJunctionPoint: RGJunctionPoint.lr  // Left/Right connections

4. Curved Lines

Use curved lines for visual appeal:

defaultLineShape: RGLineShape.StandardCurve

5. Text on Path

Maintain text-on-path functionality:

defaultLineTextOnPath: true

Creative Use Cases

• Process Flows: Display left-to-right process workflows
• Timeline Visualization: Show chronological developments
• Pipeline Stages: Visualize pipeline stages
• Decision Trees: Display decision-making processes
• Project Roadmaps: Show project timelines
• Manufacturing Flows: Display production line stages