[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:multi-group":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 在同一个图中加载多个互不连通的网络\n\n## 此示例构建了什么\n\n本示例渲染一个单独的 `RelationGraph` 画布，其中包含若干彼此断开的簇，以及两个完全没有边的节点。最终效果是一个全高度视图，节点带有细黑色边框，黑色线标签直接绘制在线路径上，内置工具栏停靠在右下角。\n\n组件挂载后，图会立即完成初始化。代码不会要求用户手动触发布局或适配操作，而是加载静态数据集、将视口移动到中心，并缩放场景使其完整显示。因此，当你希望用极少的运行时逻辑在一个画布中展示碎片化图数据时，这个示例很适合作为基线。\n\n## 数据如何组织\n\n数据定义为一个模块级的 `RGJsonData` 字面量，包含 `rootId`、`nodes` 和 `lines`。该数据混合了多个彼此独立的关系分组：一组从节点 `2` 附近开始，另一组从节点 `6` 附近开始，还有一组从节点 `10` 附近开始，而 `single-1` 和 `single-2` 则完全独立。\n\n在调用 `setJsonData()` 之前没有任何预处理步骤。该示例不会派生辅助边、转换嵌套结构，也不会在用户代码中计算位置。在真实应用中，这种结构可以表示多个产品族、若干彼此独立的系统图、部分已建立关联的知识图谱导入结果，或用于审查尚未连接记录的界面。\n\n## relation-graph 的使用方式\n\n`index.tsx` 用 `RGProvider` 包裹该 demo，使 `MyGraph.tsx` 能通过 `RGHooks.useGraphInstance()` 获取当前激活的图实例。图实例 API 是整个运行流程的核心：`setJsonData()` 注入准备好的数据，`moveToCenter()` 将视图重新居中，`zoomToFit()` 则在首次渲染时让所有内容都可见。\n\n`RelationGraph` 组件接收一个紧凑的 `graphOptions` 对象。该示例使用内置的 `center` 布局，开启沿路径显示的线标签，保持默认线条颜色为黑色，应用 1 像素黑色节点边框，并将内置工具栏以横向方式重新放到右下角。这里没有自定义插槽，没有自定义节点渲染器，没有编辑工具，也没有后续的重新布局步骤。\n\n样式刻意保持轻量。样式表基本不改动默认结构，只把选中状态线标签的颜色覆盖为白色。这种克制使示例重点落在断开数据的加载，而不是主题定制上。\n\n## 关键交互\n\n- 主要交互是自动初始化：图会在挂载 effect 中自动加载、居中并缩放适配。\n- 用户可以通过 relation-graph 的标准视口控制来查看这些彼此断开的分组，内置工具栏显示在右下角。\n- 如果某条线进入内置的选中状态，样式表会将其标签文字改为白色，在不引入自定义事件逻辑的前提下提供一个轻量的视觉反馈。\n\n## 关键代码片段\n\n这个片段说明，数据集以内联方式声明，并且除了主要的连通分组外，还已经包含了孤立节点。\n\n```tsx\nconst myJsonData: RGJsonData = {\n  rootId: '2',\n  nodes: [\n    { id: '2', text: 'ALTXX' },\n    { id: '3', text: 'CH2 TTN' },\n    { id: 'single-1', text: 'Single 1' },\n    { id: 'single-2', text: 'Single 2' },\n    // ...other connected nodes...\n  ],\n```\n\n这个片段说明，图配置刻意保持精简：单一的 `center` 布局、单色默认样式，以及重新定位后的内置工具栏。\n\n```tsx\nconst graphOptions: RGOptions = {\n  defaultNodeBorderWidth: 1,\n  defaultNodeBorderColor: '#000000',\n  toolBarDirection: 'h',\n  toolBarPositionH: 'right',\n  toolBarPositionV: 'bottom',\n  defaultLineTextOnPath: true,\n  defaultLineColor: '#000000',\n  layout: { layoutName: 'center' }\n};\n```\n\n这个片段表明，运行时行为只是一次挂载时的初始化流程，之后不会再执行重新布局或编辑步骤。\n\n```tsx\nconst initializeGraph = async () => {\n  await graphInstance.setJsonData(myJsonData);\n  graphInstance.moveToCenter();\n  graphInstance.zoomToFit();\n};\n\nuseEffect(() => {\n  initializeGraph();\n}, []);\n```\n\n这个样式片段表明，该示例将自定义主题控制在最低限度，只对选中线条的标签做了强调。\n\n```scss\n.my-graph {\n  .relation-graph {\n    .rg-line-peel.rg-line-checked {\n      .rg-line-label {\n        color: #fff;\n      }\n    }\n  }\n}\n```\n\n## 这个示例的独特之处\n\n与附近的示例如 `multi-group-2` 和 `multi-group-3` 相比，这个版本是更简单的断开数据基线。它保留初始的 `center` 布局，并在第一次 `setJsonData()` 加上居中与适配流程后就停止，因此本文重点可以放在输入数据形态本身，而不是树形走线、强制重新布局或延迟修改选项上。\n\n对比数据还带来了一个更具体的区别：该示例在源数据中让 `single-1` 和 `single-2` 真正保持无边状态。这使它区别于 `show-single-nodes` 一类示例，后者会引入辅助边以便在布局过程中保持孤立节点可见。这里要说明的重点，是在一个图中原生呈现断开的连通分量和孤立记录，而不是为布局限制提供变通方案。\n\n它的整体组合在示例集中相对少见：一个内联数据载荷、多个彼此断开的分组、两个孤立节点、沿路径显示的标签、全高度画布，以及几乎没有自定义 UI 或样式。当目标是证明单个 relation-graph 实例无需额外编排也能展示碎片化拓扑时，它是一个很有用的起点。\n\n## 这种模式还能用于哪里\n\n这种模式也很适合那些需要同时展示多个互不相关子图的审查界面，例如多个设备总成、相互独立的产品模块，或部分完成合并的主数据网络。它同样适用于导入校验工具，此时部分记录已经形成簇，而另一些记录仍然处于孤立状态。\n\n同样的结构还可以扩展到审核或分析工作流中，在决定是否建立连接之前，先在同一个视口中比较多个彼此断开的社区。如果后续需求增加了交互，这个示例也能作为稳定的基线，因为其数据加载路径已经与编辑、插槽渲染和重新布局逻辑解耦。\n",false,500,1782615416935]