自定义图实例与双重布局

自定义图实例，在左右两侧渲染两个单独的数据集，具有独立的布局。

自定义图实例与双重布局

功能概述

此示例演示了如何自定义图实例以在画布的左侧和右侧独立地渲染和布局两个单独的数据集。

核心特性实现

1. 存储多个数据集

在选项中保留单独的数据：

const graphOptions: RGOptions = {
    layout: { layoutName: 'fixed' },
    data: {
        myLeftJsonData,
        myRightJsonData
    }
};

2. 自定义图实例

覆盖 doLayout 方法：

const initializeGraph = async () => {
    // 这里的 graphInstance 是一个自定义实例，它覆盖了 doLayout
    // 它从 graphOptions.data 内部读取 myLeftJsonData 和 myRightJsonData
    graphInstance.doLayout();
};

3. 分离的数据结构

定义独立的数据集：

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

const myRightJsonData: RGJsonData = {
    rootId: '2',
    nodes: [/* 右侧节点 */],
    lines: [/* 右侧线条 */]
};

4. 不同的节点样式

为每一侧应用不同的样式：

myRightJsonData.nodes.forEach(node => {
    node.opacity = 0.5;
    node.nodeShape = RGNodeShape.circle;
    node.width = 80;
    node.height = 80;
    node.color = 'transparent';
});

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

5. 布局定位

自定义布局逻辑将组定位在不同的侧：

// 在自定义图实例中：
doLayout() {
    // 使用树形布局布局左侧数据
    // 使用中心布局布局右侧数据
    // 将左侧组定位在左侧
    // 将右侧组定位在右侧
}

创意使用场景

• 比较视图：比较两个相关的数据集
• 前后对比：并排显示状态变化
• 输入/输出：显示流程输入和输出
• 源/目标：显示数据流源和目标
• 左/右导航：双向导航系统
• 并行流程：显示并发流程