在同一个图中加载多个互不连通的网络

此示例构建了什么

本示例渲染一个单独的 RelationGraph 画布，其中包含若干彼此断开的簇，以及两个完全没有边的节点。最终效果是一个全高度视图，节点带有细黑色边框，黑色线标签直接绘制在线路径上，内置工具栏停靠在右下角。

组件挂载后，图会立即完成初始化。代码不会要求用户手动触发布局或适配操作，而是加载静态数据集、将视口移动到中心，并缩放场景使其完整显示。因此，当你希望用极少的运行时逻辑在一个画布中展示碎片化图数据时，这个示例很适合作为基线。

数据如何组织

数据定义为一个模块级的 RGJsonData 字面量，包含 rootId、nodes 和 lines。该数据混合了多个彼此独立的关系分组：一组从节点 2 附近开始，另一组从节点 6 附近开始，还有一组从节点 10 附近开始，而 single-1 和 single-2 则完全独立。

在调用 setJsonData() 之前没有任何预处理步骤。该示例不会派生辅助边、转换嵌套结构，也不会在用户代码中计算位置。在真实应用中，这种结构可以表示多个产品族、若干彼此独立的系统图、部分已建立关联的知识图谱导入结果，或用于审查尚未连接记录的界面。

relation-graph 的使用方式

index.tsx 用 RGProvider 包裹该 demo，使 MyGraph.tsx 能通过 RGHooks.useGraphInstance() 获取当前激活的图实例。图实例 API 是整个运行流程的核心：setJsonData() 注入准备好的数据，moveToCenter() 将视图重新居中，zoomToFit() 则在首次渲染时让所有内容都可见。

RelationGraph 组件接收一个紧凑的 graphOptions 对象。该示例使用内置的 center 布局，开启沿路径显示的线标签，保持默认线条颜色为黑色，应用 1 像素黑色节点边框，并将内置工具栏以横向方式重新放到右下角。这里没有自定义插槽，没有自定义节点渲染器，没有编辑工具，也没有后续的重新布局步骤。

样式刻意保持轻量。样式表基本不改动默认结构，只把选中状态线标签的颜色覆盖为白色。这种克制使示例重点落在断开数据的加载，而不是主题定制上。

关键交互

主要交互是自动初始化：图会在挂载 effect 中自动加载、居中并缩放适配。
用户可以通过 relation-graph 的标准视口控制来查看这些彼此断开的分组，内置工具栏显示在右下角。
如果某条线进入内置的选中状态，样式表会将其标签文字改为白色，在不引入自定义事件逻辑的前提下提供一个轻量的视觉反馈。

关键代码片段

这个片段说明，数据集以内联方式声明，并且除了主要的连通分组外，还已经包含了孤立节点。

const myJsonData: RGJsonData = {
  rootId: '2',
  nodes: [
    { id: '2', text: 'ALTXX' },
    { id: '3', text: 'CH2 TTN' },
    { id: 'single-1', text: 'Single 1' },
    { id: 'single-2', text: 'Single 2' },
    // ...other connected nodes...
  ],

这个片段说明，图配置刻意保持精简：单一的 center 布局、单色默认样式，以及重新定位后的内置工具栏。

const graphOptions: RGOptions = {
  defaultNodeBorderWidth: 1,
  defaultNodeBorderColor: '#000000',
  toolBarDirection: 'h',
  toolBarPositionH: 'right',
  toolBarPositionV: 'bottom',
  defaultLineTextOnPath: true,
  defaultLineColor: '#000000',
  layout: { layoutName: 'center' }
};

这个片段表明，运行时行为只是一次挂载时的初始化流程，之后不会再执行重新布局或编辑步骤。

const initializeGraph = async () => {
  await graphInstance.setJsonData(myJsonData);
  graphInstance.moveToCenter();
  graphInstance.zoomToFit();
};

useEffect(() => {
  initializeGraph();
}, []);

这个样式片段表明，该示例将自定义主题控制在最低限度，只对选中线条的标签做了强调。

.my-graph {
  .relation-graph {
    .rg-line-peel.rg-line-checked {
      .rg-line-label {
        color: #fff;
      }
    }
  }
}

这个示例的独特之处

与附近的示例如 multi-group-2 和 multi-group-3 相比，这个版本是更简单的断开数据基线。它保留初始的 center 布局，并在第一次 setJsonData() 加上居中与适配流程后就停止，因此本文重点可以放在输入数据形态本身，而不是树形走线、强制重新布局或延迟修改选项上。

对比数据还带来了一个更具体的区别：该示例在源数据中让 single-1 和 single-2 真正保持无边状态。这使它区别于 show-single-nodes 一类示例，后者会引入辅助边以便在布局过程中保持孤立节点可见。这里要说明的重点，是在一个图中原生呈现断开的连通分量和孤立记录，而不是为布局限制提供变通方案。

它的整体组合在示例集中相对少见：一个内联数据载荷、多个彼此断开的分组、两个孤立节点、沿路径显示的标签、全高度画布，以及几乎没有自定义 UI 或样式。当目标是证明单个 relation-graph 实例无需额外编排也能展示碎片化拓扑时，它是一个很有用的起点。

这种模式还能用于哪里

这种模式也很适合那些需要同时展示多个互不相关子图的审查界面，例如多个设备总成、相互独立的产品模块，或部分完成合并的主数据网络。它同样适用于导入校验工具，此时部分记录已经形成簇，而另一些记录仍然处于孤立状态。

同样的结构还可以扩展到审核或分析工作流中，在决定是否建立连接之前，先在同一个视口中比较多个彼此断开的社区。如果后续需求增加了交互，这个示例也能作为稳定的基线，因为其数据加载路径已经与编辑、插槽渲染和重新布局逻辑解耦。

多个关系网