带多个树组的混合布局管理器

使用自定义布局管理器在单个图中组合多个布局算法，具有五个树组。

带多个树组的混合布局管理器

功能概述

此示例演示了如何使用自定义布局管理器在单个图中组合多个布局算法。它显示了围绕中心节点定位的五个不同的树布局组。

核心特性实现

1. 自定义布局管理器

创建自定义布局管理器类：

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

    async applyMyLayout() {
        // 对不同的组应用不同的布局
        await this.layoutGroup('left', { x: -400, y: 0 }, 'left');
        await this.layoutGroup('right', { x: 400, y: 0 }, 'right');
        await this.layoutGroup('top', { x: 0, y: -300 }, 'top');
        await this.layoutGroup('bottom', { x: 0, y: 300 }, 'bottom');
        await this.layoutGroup('bottom-right', { x: 400, y: 300 }, 'left');
    }
}

2. 基于组的节点组织

使用数据属性按组组织节点：

nodes: [
    { id: 'r', text: 'R', data: { myGroupId: 'left' } },
    { id: 'a', text: 'a', data: { myGroupId: 'right' } },
    { id: 't', text: 't', data: { myGroupId: 'top' } },
    { id: 'e', text: 'e', data: { myGroupId: 'bottom' } },
    { id: 'br-root', text: 'BR-Root', data: { myGroupId: 'bottom-right' } }
]

3. 颜色编码组

对不同的组应用不同的样式：

<RGSlotOnNode>
    {({ node }) => {
        let nodeClass = '';
        if (node.data && node.data.myGroupId === 'left') {
            nodeClass = 'c-left-node';
        } else if (node.data && node.data.myGroupId === 'right') {
            nodeClass = 'c-right-node';
        } else if (node.data && node.data.myGroupId === 'top') {
            nodeClass = 'c-top-node';
        }
        return <div className={nodeClass}>{node.text}</div>;
    }}
</RGSlotOnNode>

4. 自动线条 ID 生成

自动为线条添加 ID：

let lineIndex = 0;
const createLine = (line: any): JsonLine => {
    lineIndex++;
    return { id: `line-${lineIndex}`, ...line };
};

5. 力布局集成

选择性地对特定组使用力布局：

stopMyForceLayout() {
    if (this.forceLayoutTimer) {
        clearInterval(this.forceLayoutTimer);
    }
}

创意使用场景

• 复杂系统可视化：使用适当的布局显示不同的子系统
• 组织架构图：显示具有不同层次结构的部门
• 网络拓扑：在一个视图中组合不同的网络类型
• 仪表板布局：创建全面的系统概览
• 知识图谱：分别组织不同的知识域
• 流程：显示具有不同流程模式的多个流程