智能树形布局方向切换 - 支持动态水平/垂直模式的智能树布局

智能树形布局支持水平和垂直模式

功能概述

本示例演示了智能树形布局算法，该算法自动确定节点层级和位置以创建清晰、可读的树形结构。与传统需要严格父子关系的树形布局不同，智能树分析图结构并智能地将节点组织成层级。示例展示了水平（从左到右）和垂直（从上到下）布局之间的动态切换，以及实时节点和连线属性更新。

核心特性实现

双配置系统

为水平和垂直布局维护单独的选项集：

// 水平树形布局配置
const graphOptionsH: RGOptions = {
    layout: {
        layoutName: 'smart-tree',
        treeNodeGapH: 300,  // 大水平间距
        treeNodeGapV: 10,   // 小垂直间距
        from: 'left'
    },
    defaultNodeShape: RGNodeShape.rect,
    defaultNodeWidth: 120,
    defaultNodeHeight: 30,
    defaultLineShape: RGLineShape.StandardCurve,
    defaultJunctionPoint: RGJunctionPoint.lr,
    defaultNodeBorderWidth: 0,
    defaultLineColor: '#ca8a04',
    defaultNodeColor: '#ca8a04'
};

// 垂直树形布局配置
const graphOptionsV: RGOptions = {
    layout: {
        layoutName: 'smart-tree',
        treeNodeGapH: 10,   // 小水平间距
        treeNodeGapV: 300,  // 大垂直间距
        from: 'top'
    },
    defaultNodeShape: RGNodeShape.rect,
    defaultNodeWidth: 30,   // 窄宽度
    defaultNodeHeight: 120, // 高高度
    defaultLineShape: RGLineShape.StandardCurve,
    defaultJunctionPoint: RGJunctionPoint.tb,
    defaultNodeBorderWidth: 0
};

关键要点：

• 尺寸交换：宽度和高度在方向之间反转
• 间距调整：流动方向大间距（300），垂直方向小间距（10）
• 连接点更改：水平用 lr（左-右），垂直用 tb（上-下）
• 颜色主题：水平模式的金色/黄色方案

动态布局切换

updateOptionsAndRelayout 函数处理方向更改：

const updateOptionsAndRelayout = async () => {
    const targetOptions = layoutFrom === 'left' ? graphOptionsH : graphOptionsV;
    graphInstance.setOptions(targetOptions);

    // 更新现有节点以匹配新尺寸
    graphInstance.getNodes().forEach((node) => {
        graphInstance.updateNode(node, {
            width: targetOptions.defaultNodeWidth,
            height: targetOptions.defaultNodeHeight
        });
    });

    // 更新连线形状
    graphInstance.getLines().forEach((line) => {
        graphInstance.updateLine(line, {
            lineShape: targetOptions.defaultLineShape
        });
    });

    await graphInstance.sleep(100); // 等待浏览器渲染
    await graphInstance.doLayout();
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
};

关键要点：

• 选项替换：通过 setOptions 交换整个选项对象
• 节点尺寸更新：调整现有节点大小以匹配新方向
• 连线形状更新：确保连线使用适当的曲线样式
• 渲染等待：sleep(100) 允许浏览器在布局之前应用尺寸更改
• 视图调整：重新布局后重新居中和缩放

智能树布局特性

智能树算法自动：

• 基于图拓扑确定节点层级
• 从结构中隐式创建父子关系
• 定位节点以最小化交叉
• 处理具有多个父/子连接的复杂图

复杂图数据结构

使用带有交叉连接的多分支树：

const myJsonData: RGJsonData = {
    rootId: 'root',
    nodes: [
        { id: 'root', text: 'Root' },
        { id: 'N2', text: 'N2' },
        { id: 'N3', text: 'N3' },
        // ... 更多节点（N4-N41）
    ],
    lines: [
        { from: 'N3', to: 'N2', text: 'Line 1' },
        { from: 'N2', to: 'root', text: 'Line 1' },
        { from: 'root', to: 'N4', text: 'Line 2' },
        { from: 'N4', to: 'N5', text: 'Line 3' },
        // ... 复杂的互连
    ]
};

关键要点：

• 隐式层级：连线定义关系，算法确定层级
• 多个父节点：节点可以有多个传入连接
• 交叉链接：同一层级或不同层级节点之间的连接
• 文本标签：每条连线都有描述性文本

布局方向控制

方向切换的 UI 选择器：

<SimpleUISelect
    data={[
        { value: 'left', text: 'Horizontal Tree' },
        { value: 'top', text: 'Vertical Tree' }
    ]}
    currentValue={layoutFrom}
    onChange={(newValue: string) => { setLayoutFrom(newValue); }}
/>

响应式样式

基于布局方向使用 CSS 类：

<div className={`my-graph my-layout-${layoutFrom}`} style={{ height: '100vh' }}>

这允许在 SCSS 中为水平和垂直方向使用不同样式。

布局更改的 React 效果

当方向状态更改时触发重新布局：

useEffect(() => {
    initializeGraph();
}, []);

useEffect(() => {
    updateOptionsAndRelayout();
}, [layoutFrom]);

小地图导航

包含 RGMiniView 用于概览导航：

<RelationGraph options={graphOptionsH} onNodeClick={onNodeClick} onLineClick={onLineClick}>
    <RGSlotOnView>
        <RGMiniView />
    </RGSlotOnView>
</RelationGraph>

创意使用场景

矩阵报告组织结构图： 显示公司层级，水平布局用于高管层级，垂直布局用于职能部门。智能树自动处理虚线报告关系。

决策树可视化： 显示高水平战略的水平流和详细战术的垂直流的决策路径。根据受众偏好切换方向。

技能进度图： 可视化学习路径，水平布局用于从初学者到高级的进度，垂直布局用于学科分类。智能树自动组织先决条件。

带分支的流程流程： 显示某些步骤有多个结果的业务流程。水平用于时间线视图，垂直用于组织责任视图。

网络拓扑图： 显示物理布局的水平网络基础设施和逻辑层的垂直。智能树智能处理跨层连接。

产品功能依赖关系： 使用水平的用户流程和垂直的技术依赖关系映射软件功能。为不同的利益相关者演示切换方向。