支持方向控制的树形布局

演示树形布局算法，支持多个生长方向以及水平和垂直方向之间的动态切换。

支持方向控制的树形布局

功能概述

此示例演示了支持多个生长方向（左、右、上、下）的树形布局算法。它展示了如何在水平和垂直树形布局之间动态切换并正确更新节点和线条样式。

核心特性实现

1. 树形布局配置

使用特定方向和间距设置配置树形布局：

const graphOptionsH: RGOptions = {
    layout: {
        layoutName: 'tree',
        treeNodeGapH: 300,  // 节点间的水平间距
        treeNodeGapV: 10,   // 节点间的垂直间距
        from: 'left'        // 生长方向
    },
    defaultNodeShape: RGNodeShape.rect,
    defaultLineShape: RGLineShape.StandardCurve,
    defaultJunctionPoint: RGJunctionPoint.lr
};

2. 动态布局切换

通过更新选项和节点大小在水平和垂直布局之间切换：

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();
};

3. 连接点选择

根据布局方向使用适当的连接点：

• 水平布局（from: ‘left’/‘right’）：使用 RGJunctionPoint.lr（左/右）
• 垂直布局（from: ‘top’/‘bottom’）：使用 RGJunctionPoint.tb（上/下）

4. 小地图集成

为大型图添加小地图以进行导航：

<RelationGraph options={graphOptions}>
    <RGSlotOnView>
        <RGMiniView />
    </RGSlotOnView>
</RelationGraph>

创意使用场景

• 组织架构图：以清晰的自上而下或从左到右结构显示公司层级
• 决策树：可视化具有可扩展分支的决策过程
• 文件系统可视化：显示熟悉的树形布局目录结构
• 分类法显示：呈现生物分类或类别层次结构
• 流程图：说明顺序或并行过程
• 思维导图：创建具有灵活方向的分层思想结构