多组中心布局

使用中心布局算法的复杂层次结构，具有从中心根节点辐射的多个级别。

多组中心布局

功能概述

此示例使用中心布局算法显示复杂的层次结构。它显示了从中心根节点辐射的多个子系统级别，文本显示在弯曲的线条上。

核心特性实现

1. 中心布局配置

从中心配置径向布局：

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'center',
        levelGaps: [300, 200, 200]  // 级别之间的距离
    },
    defaultLineTextOnPath: true,  // 文本跟随曲线
    defaultLineColor: '#000000'
};

2. 分层数据结构

在多个级别中组织节点：

const myJsonData: RGJsonData = {
    rootId: '2',
    nodes: [
        // 级别 0：根
        { id: '2', text: 'ALTXX' },
        // 级别 1：主要子系统
        { id: '3', text: 'CH2 TTN' },
        { id: '4', text: 'CH1 AlCu' },
        { id: '5', text: 'MainFrame' },
        // 级别 2：组件
        { id: '14', text: 'ArHigh' },
        { id: '15', text: 'ArLow' },
        // 级别 3：详细信息
        { 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. 弯曲线路径文本

启用文本跟随线路径：

defaultLineTextOnPath: true

4. 级别间隙控制

控制层次级别之间的间距：

layout: {
    layoutName: 'center',
    levelGaps: [300, 200, 200]  // 每个级别的自定义间隙
}

5. 简单节点渲染

使用带有文本的默认节点渲染：

<RelationGraph options={graphOptions}>
    {/* 默认节点渲染 */}
</RelationGraph>

创意使用场景

• 系统架构：显示复杂的系统层次
• 组织架构图：显示具有多个级别的公司结构
• 知识图谱：可视化概念关系
• 网络拓扑：显示网络基础设施
• 生物分类：显示分类学层次
• 产品细分：显示产品组件树