单个画布中的多布局混合

在同一画布上使用两种不同的布局算法（中心和树形），具有独立的组定位。

单个画布中的多布局混合

功能概述

此示例演示了如何在同一画布上使用两种不同的布局算法（中心和树形）。每个节点组独立布局，然后相对于彼此定位。

核心特性实现

1. 多个数据集

为每个布局定义单独的数据：

const treeJsonData: RGJsonData = {
    rootId: 'a',
    nodes: [/* 树节点 */],
    lines: [/* 树线条 */]
};

const centerJsonData: RGJsonData = {
    rootId: '2',
    nodes: [/* 中心节点 */],
    lines: [/* 中心线条 */]
};

2. 创建独立布局

为每个组使用 createLayout：

const doLayoutAll = async () => {
    const treeRootNode = graphInstance.getNodeById(treeJsonData.rootId)!;
    const centerRootNode = graphInstance.getNodeById(centerJsonData.rootId)!;

    // 布局中心组
    const myCenterLayout = graphInstance.createLayout({
        layoutName: 'center'
    });
    const centerNodes = graphInstance.getNetworkNodesByNode(centerRootNode);
    myCenterLayout.placeNodes(centerNodes, centerRootNode);

    // 相对于中心组定位树根
    const nodesRectInfo = graphInstance.getNodesRectBox(centerNodes);
    treeRootNode.x = nodesRectInfo.maxX + 100;

    // 布局树组
    const myTreeLayout = graphInstance.createLayout({
        layoutName: 'tree',
        from: 'left',
        treeNodeGapH: 200,
        treeNodeGapV: 30
    });
    const treeNodes = graphInstance.getNetworkNodesByNode(treeRootNode);
    myTreeLayout.placeNodes(treeNodes, treeRootNode);
};

3. 添加所有节点和线条

在布局之前加载所有数据：

graphInstance.addNodes(treeJsonData.nodes);
graphInstance.addLines(treeJsonData.lines);
graphInstance.addNodes(centerJsonData.nodes);
graphInstance.addLines(centerJsonData.lines);

4. 透明节点

使节点半透明以进行视觉区分：

centerJsonData.nodes.forEach(node => {
    node.opacity = 0.5;
    node.color = 'transparent';
});

5. 不同线条样式

为每个组使用不同的样式：

centerJsonData.lines.forEach(line => {
    line.lineShape = RGLineShape.StandardStraight;
    line.fromJunctionPoint = RGJunctionPoint.border;
    line.toJunctionPoint = RGJunctionPoint.border;
});

创意使用场景

• 比较分析：比较不同的网络结构
• 系统集成：在一个视图中显示多个系统
• 数据聚合：组合来自不同来源的数据
• 多阶段流程：显示不同的流程阶段
• 前后视图：显示状态比较
• 混合可视化：混合不同的可视化类型