混合树形布局管理器

自定义布局管理器，组合多个树结构，具有单独的布局方向和组间连接。

混合树形布局管理器

功能概述

此示例演示了一个自定义混合树形布局管理器，它在单个图中组合了多个树结构。每个树组可以有自己的布局方向和样式，根节点之间有连接。

核心特性实现

1. 自定义树形布局管理器

为树创建专门的布局管理器：

class MyMixTreeLayout {
    constructor(graphInstance) {
        this.graphInstance = graphInstance;
    }

    async loadData(treeJsonData) {
        // 解析和组织树数据
        this.allGroups = this.parseTreeData(treeJsonData);
    }

    applyAllGroupLayout() {
        // 对每个组应用树形布局
        this.allGroups.forEach(group => {
            this.applyTreeLayout(group);
        });
    }

    connectRootToChildrenTreeRoot() {
        // 在组之间连接根节点
    }
}

2. 加载和应用布局

使用数据初始化并应用布局：

const initializeGraph = async () => {
    graphInstance.enableNodeXYAnimation();
    const myTreeJsonData = await getMyTreeJsonData();
    await myMixTreeLayout.current.loadData(myTreeJsonData);
    await graphInstance.sleep(200);
    myMixTreeLayout.current.applyAllGroupLayout();
    myMixTreeLayout.current.connectRootToChildrenTreeRoot();
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
};

3. 处理展开/折叠

节点展开或折叠时重新布局：

const onNodeExpand = (node: RGNode) => {
    myMixTreeLayout.current.applyAllGroupLayout();
};

const onNodeCollapse = (node: RGNode) => {
    myMixTreeLayout.current.applyAllGroupLayout();
};

4. 按深度展开

控制所有树的展开级别：

const openByDeep = (deep: number) => {
    myMixTreeLayout.current.expandAllGroupByDeep(deep);
    graphInstance.zoomToFit();
};

5. 小地图集成

为复杂布局添加导航：

<RGSlotOnView>
    <RGMiniView />
</RGSlotOnView>

创意使用场景

• 多级组织架构图：显示复杂的组织层次
• 产品类别：显示嵌套的产品分类
• 文档层次：可视化文件夹结构
• 知识域：显示相互关联的知识领域
• 系统架构：显示子系统关系
• 生物分类：显示分类层次