分阶段追加图谱数据

此示例构建了什么

这个示例渲染了一个居中的关系图谱：它从一个中心节点和一小组已连接节点开始。一个浮动辅助窗口允许用户在不替换当前已显示图谱的前提下，继续追加第二层数据，再追加第三层数据。

视觉结果被刻意保持得很简单：暖米色节点、直线连接器，以及几乎没有额外装饰的全高画布。这个示例的重点是分阶段揭示流程。它不是通过点击节点来展开分支，而是使用明确的产品控件，按固定顺序释放更多图谱结构。

数据如何组织

图谱数据在 MyGraph.tsx 中被拆分为三个内联的 RGJsonData 片段，并且三者都使用 rootId: '2'。第一份载荷包含初始的七个节点和六条带标签的连线。第二份载荷围绕现有节点 7、8、9 和 1 等添加更多实体，第三份载荷则在节点 5 下追加五个子节点。

在调用 setJsonData() 或 appendJsonData() 之前，没有任何预处理流水线。每个片段都直接声明为字面量形式的 nodes 和 lines 数组，然后直接传给图谱实例。在业务应用中，相同的结构可以来自分阶段返回的 API 响应、基于权限的细节层，或随着时间逐步暴露更多关系的工作流检查点。

如何使用 relation-graph

index.tsx 使用 RGProvider 包裹整个示例，使 relation-graph 的 hooks 同时可用于图谱组件和共享辅助窗口。在 MyGraph.tsx 内，RGHooks.useGraphInstance() 驱动整个生命周期：它先用 setJsonData() 加载初始数据集，再通过 moveToCenter() 将视图居中，使用 zoomToFit() 适配画面，随后再用 appendJsonData() 合并额外片段。

RelationGraph 实例被配置为一个居中的查看器，使用 layoutName: 'center'、直线连线、基于边框的连接点，以及简洁的默认节点和连线样式。这个示例中没有自定义节点、连线、画布或视口插槽。虽然存在 SCSS 文件，但它并没有对图谱做实质性重绘，因此大多数可见行为都来自图谱选项以及导入的辅助窗口组件。

辅助窗口本身也是这里使用 relation-graph 的一部分。它的设置面板通过 RGHooks.useGraphStore() 读取图谱状态，通过 setOptions() 更新滚轮和拖拽行为，并通过调用 prepareForImageGeneration()、getOptions()、domToImageByModernScreenshot() 和 restoreAfterImageGeneration() 导出画布图像。

关键交互

Load Level 2 Data 会追加第二个 RGJsonData 片段，然后将自身禁用。
Load Level 3 Data 在第 2 层追加之前保持禁用，之后追加最后一个片段并将自身禁用。
辅助窗口可以被拖动、最小化，并切换到设置面板。
设置面板可以修改滚轮行为、修改画布拖拽行为，并下载当前图谱图像。
节点点击和连线点击处理器已经接入，但它们只会记录被点击的对象，不会驱动分阶段揭示流程。

关键代码片段

下面这段代码表明，这个示例被有意配置为一个居中、直线连线的查看器，并使用基于边框锚定的边以及暖色系默认节点样式。

const graphOptions: RGOptions = {
    defaultNodeBorderWidth: 1,
    defaultNodeBorderColor: '#333333',
    defaultNodeColor: 'rgba(250, 228, 197, 1)',
    defaultLineWidth: 1,
    defaultLineShape: RGLineShape.StandardStraight,
    layout: {
        layoutName: 'center',
    },
    defaultJunctionPoint: RGJunctionPoint.border
};

这段代码说明，图谱只会用基础数据集初始化一次，然后在后续增长发生之前先完成居中和适配。

const initializeGraph = async () => {
    const myJsonData: RGJsonData = {
        rootId: '2',
        nodes: [
            { id: '1', text: 'Node-1' },
            // ... other initial nodes and lines ...
        ]
    };

    await graphInstance.setJsonData(myJsonData);
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
};

这个处理器展示了该示例的核心模式：构造另一个 RGJsonData 片段，并通过 appendJsonData() 将其合并到现有图谱中。

const loadNextLevel2Data = () => {
    setLevel2DataIsloaded(true);
    const myJsonData: RGJsonData = {
        rootId: '2',
        nodes: [
            // ... level 2 nodes ...
        ],
        lines: [
            // ... level 2 lines ...
        ]
    };
    graphInstance.appendJsonData(myJsonData);
};

分阶段揭示流程直接通过 UI 中根据本地加载标记禁用按钮来强制执行。

<SimpleUIButton disabled={level2DataIsloaded}
    onClick={() => loadNextLevel2Data()}
>
    Load Level 2 Data
</SimpleUIButton>
<SimpleUIButton disabled={!level2DataIsloaded || level3DataIsloaded}
    onClick={() => loadNextLevel3Data()}
>
    Load Level 3 Data
</SimpleUIButton>

辅助覆盖层并不只是装饰；它通过 relation-graph 的 store 和实例 API 暴露了运行时画布设置。

const { options } = RGHooks.useGraphStore();
const dragMode = options.dragEventAction;
const wheelMode = options.wheelEventAction;

<SettingRow
    label="Wheel Event:"
    options={[
        { label: 'Scroll', value: 'scroll' },
        { label: 'Zoom', value: 'zoom' },
        { label: 'None', value: 'none' },
    ]}
    value={wheelMode}
    onChange={(newValue: string) => { graphInstance.setOptions({ wheelEventAction: newValue }); }}
/>

这个示例的独特之处

这个示例之所以突出，是因为它通过 appendJsonData() 追加分阶段的内联 RGJsonData 片段，让已经渲染出来的图谱继续增长。这一点才是关键差异。附近的其他示例同样使用 RGProvider、RGHooks.useGraphInstance()、setJsonData()、居中布局以及同一个浮动辅助窗口，因此这些部分并不是它与众不同的原因。

与 layout-center 相比，这里的重点是结构性增长，而不是对完整图谱进行视觉重配置。与 deep-each 相比，这里的揭示流程由按钮驱动且是确定性的，而不是在静态数据中通过点击驱动遍历。与 canvas-event 相比，这里可复用的经验是对新关系层的引导式披露，而不是画布事件的埋点。

在 helper-window 示例这一组中，这个示例把覆盖层用作顺序追加控制器。这个浮动窗口不仅是设置或导出的外壳；它还是下一层图谱可用的入口，而且第 3 层操作被有意设置为必须在第 2 层之后才能启用。

这种模式还适用于哪里

这种模式很适合那些需要明确、按顺序披露图谱细节的应用。比如分步骤揭示持股层级的尽职调查工具、在用户执行操作后才解锁更深汇报层级的组织架构图，以及只有在当前阶段审查完成后才加载下游层级的供应链或依赖关系图。

它也适用于这样一些系统：下一个图谱片段来自后端，但仍然必须合并进当前视图，而不是替换当前视图。这个示例使用的是硬编码载荷，但相同的“追加并设门槛”结构也适用于分阶段搜索结果、受权限控制的关系层，或向导式调查工作流。

分步追加图谱数据