[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:built-in-line-rendering-options":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 在一张紧凑图中比较内置连线行为\n\n## 本示例构建的内容\n\n本示例构建了一个小型、全高的 relation-graph 画布，用作连线渲染选项的可视化参考。图使用居中布局、圆形节点和按颜色区分的连接，让查看者可以在一个预设场景中比较正交走线、曲线分支、箭头方向和标签位置。\n\n用户可以点击节点或连线，但这些处理函数只会把选中的对象记录到控制台。这个示例的重点不是编辑或运行时控制。它的价值在于，连线变体直接编码在加载的图数据中，因此整个画布更像一块聚焦于内置边行为的对照板。\n\n## 数据是如何组织的\n\n数据在 `initializeGraph()` 中以内联方式声明为一个 `RGJsonData` 对象，包含 `rootId: 'a'`、12 个节点和 12 条连线。在调用 `setJsonData()` 之前没有预处理步骤：该示例直接在代码中构造最终数据集并直接加载。\n\n关键结构在 `lines` 数组中，而不是 `nodes` 数组。每条边记录都带有自己的渲染元数据，包括 `lineShape`、`fromJunctionPoint`、`toJunctionPoint`、`showStartArrow`、`showEndArrow`、`color` 和 `useTextOnPath`。这使得该数据集很容易映射到真实业务场景，在这些场景里，每条连接都有各自的视觉含义，例如工作流分支、依赖方向、集成路径或数据血缘标注。\n\n## relation-graph 的使用方式\n\n`index.tsx` 使用 `RGProvider` 包裹该示例，`MyGraph.tsx` 则通过 `RGHooks.useGraphInstance()` 获取当前图实例。组件随后使用居中布局、固定的圆形节点默认值以及自定义层级间距来配置图。\n\n实际的图加载只在 `useEffect()` 中执行一次。`initializeGraph()` 调用 `setJsonData()`，然后立即通过 `moveToCenter()` 和 `zoomToFit()` 重新定位视口，因此无需任何用户设置，就能看到准备好的对比场景。\n\n本示例没有使用节点插槽、连线插槽、画布插槽或编辑 API。它依赖默认渲染器，并展示了在不使用自定义 SVG 或覆盖层 UI 的情况下，内置边选项可以做到什么程度。可见样式主要由图配置和数据中每条连线的颜色驱动。虽然导入了一个本地 SCSS 文件，但审阅过的 JSX 并没有挂载其中定义的 `.my-graph` 包装器，因此 CSS 覆盖是否构成最终渲染结果的一部分并不能被确认。\n\n## 关键交互\n\n唯一的自定义交互是检查性点击。点击节点会记录 `RGNode` 对象，点击连线会同时记录 `RGLine` 和对应的 `RGLink`。这些处理函数有助于开发者检查 relation-graph 为选中项返回了什么，但它们不会修改图、打开菜单或切换模式。\n\n其余体验更偏向视觉对比，而不是主动操作。该示例预先准备好了所有连线变体，并在挂载时自动执行居中和适配视图，因此查看者可以立即观察这些差异。\n\n## 关键代码片段\n\n这个片段说明，该示例通过标准图配置来塑造整体场景，而不是依赖自定义渲染器。\n\n```tsx\nconst graphOptions: RGOptions = {\n    checkedItemBackgroundColor: '#666666',\n    defaultNodeShape: RGNodeShape.circle,\n    defaultNodeWidth: 60,\n    defaultNodeHeight: 60,\n    defaultNodeBorderWidth: 1,\n    layout: {\n        layoutName: 'center',\n        levelGaps: [200, 300]\n    }\n};\n```\n\n这个片段说明，图只从内联 `RGJsonData` 加载一次，然后被定位到适合查看的位置。\n\n```tsx\nuseEffect(() => {\n    initializeGraph();\n}, []);\n\n// ...\n\nawait graphInstance.setJsonData(myJsonData);\ngraphInstance.moveToCenter();\ngraphInstance.zoomToFit();\n```\n\n这个片段说明，正交走线和连接锚点是如何在每条连线记录中分别变化的。\n\n```tsx\n{ from: 'a', to: 'c', text: 'Bottom -> Left', lineShape: RGLineShape.StandardOrthogonal, fromJunctionPoint: RGJunctionPoint.bottom, toJunctionPoint: RGJunctionPoint.left },\n{ from: 'a', to: 'b', text: 'LR -> LR', lineShape: RGLineShape.StandardOrthogonal, fromJunctionPoint: RGJunctionPoint.lr, toJunctionPoint: RGJunctionPoint.lr },\n{ from: 'a', to: 'e', text: 'Top -> Right', lineShape: RGLineShape.StandardOrthogonal, fromJunctionPoint: RGJunctionPoint.top, toJunctionPoint: RGJunctionPoint.right },\n{ from: 'a', to: 'i', text: 'LR -> LR', lineShape: RGLineShape.StandardOrthogonal, fromJunctionPoint: RGJunctionPoint.lr, toJunctionPoint: RGJunctionPoint.lr },\n```\n\n这个片段说明，在相同端点上复制的连线如何形成一组箭头方向对比。\n\n```tsx\n{ from: 'i', to: 'm', text: 'Data: i > m, But Displayed as m > i', showStartArrow: true, showEndArrow: false, color: '#00ced1' },\n{ from: 'i', to: 'm', text: 'Data：i > m', showStartArrow: false, showEndArrow: true, color: 'rgba(255, 140, 0, 1)' },\n```\n\n这个片段说明，普通的 Curve5 标签和沿路径排布的标签之间有什么区别。\n\n```tsx\n{ from: 'e', to: 'p3', text: 'The text does not follow along this line.', lineShape: RGLineShape.Curve5, color: '#ffd700' },\n{ from: 'e', to: 'p4', text: 'The text can follow along this line.', useTextOnPath: true, lineShape: RGLineShape.Curve5, color: '#ffd700' }\n```\n\n## 这个示例的独特之处\n\n与附近的示例相比，这个示例值得注意的地方在于，它用很少的脚手架展示了很多内容。对比数据表明，它的突出模式是：围绕一个小型居中布局图构建的最小查看器，大部分要点都来自 `RGJsonData` 中每条连线的元数据，而不是插槽、自定义 SVG 标记、工具面板或编辑工具。\n\n与 `line` 相比，它的差异在于紧凑性而非覆盖面。`line` 覆盖了更广泛的连线配置面，并带有更多 UI 和更多渲染变体，而这个示例去掉了这些额外表层，使内置字段更容易被单独观察。与 `bothway-tree-faq` 相比，它并不聚焦于某一个箭头方向问题；它把箭头方向、连接锚点走线以及 Curve5 标签行为组合到同一个预设画布中。与 `show-single-nodes` 和 `node-menu-2` 这类示例相比，它的可复用价值在于，仅通过数据字段控制边的呈现，而不是依赖预处理技巧或基于插槽的覆盖层。\n\n最有辨识度的细节，是它在几乎重复的连接上使用了成对的微型对比。两条 `i -> m` 连线对比了起始箭头与结束箭头的显示，两条 `e -> p*` 连线则对比了普通标签与 `useTextOnPath`。这使得该示例在团队想快速确认哪些内置标志会影响连线表现，而又不想先进入自定义渲染时，特别适合作为参考。\n\n## 这种模式还能应用在哪里\n\n这种模式很适合迁移到那些“连接的含义”和“节点的含义”同样重要的图中。例如带有不同分支语义的审批流、强调上游或下游方向的服务依赖图、需要对传输与派生做不同视觉处理的数据血缘图，以及连接锚点选择有助于解释路径方向的网络图。\n\n它也适合作为文档与 QA 模式。团队可以像这样构建一个小型对比图，在决定投入自定义插槽、自定义标记或更大的图编辑器之前，先验证内置连线选项的实际行为。在培训材料中，同样的结构也可以作为一块紧凑的参考板，帮助开发者了解哪些连线元数据字段会改变走线、箭头和文本行为。\n",false,500,1782615378518]