多组树形布局（从左到右）

使用从左到右树形布局的相同分层数据，而不是中心布局，以进行不同的视觉呈现。

多组树形布局（从左到右）

功能概述

此示例使用从左到右的树形布局来显示与前面演示相同的层次结构，但具有不同的视觉排列。它展示了如何使用不同的布局算法呈现相同的数据。

核心特性实现

1. 从左到右树形布局

配置水平树形增长：

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'tree',
        from: 'left',
        treeNodeGapH: 100  // 节点间的水平间隙
    },
    defaultJunctionPoint: RGJunctionPoint.lr,
    defaultLineShape: RGLineShape.StandardCurve,
    defaultLineTextOnPath: true,
    defaultLineColor: '#888888'
};

2. 相同数据，不同布局

使用相同的数据结构与不同的布局：

const myJsonData: RGJsonData = {
    rootId: '2',
    nodes: [/* 与 multi-group 相同的节点 */],
    lines: [/* 与 multi-group 相同的线条 */]
};

3. 连接点选择

为水平布局使用左右连接点：

defaultJunctionPoint: RGJunctionPoint.lr  // 左/右连接

4. 弯曲线条

使用弯曲线条以增加视觉吸引力：

defaultLineShape: RGLineShape.StandardCurve

5. 路径文本

保持路径文本功能：

defaultLineTextOnPath: true

创意使用场景

• 流程：显示从左到右的流程工作流
• 时间线可视化：显示按时间顺序的发展
• 管道阶段：可视化管道阶段
• 决策树：显示决策过程
• 项目路线图：显示项目时间线
• 制造流程：显示生产线阶段