在一张紧凑图中比较内置连线行为

本示例构建的内容

本示例构建了一个小型、全高的 relation-graph 画布，用作连线渲染选项的可视化参考。图使用居中布局、圆形节点和按颜色区分的连接，让查看者可以在一个预设场景中比较正交走线、曲线分支、箭头方向和标签位置。

用户可以点击节点或连线，但这些处理函数只会把选中的对象记录到控制台。这个示例的重点不是编辑或运行时控制。它的价值在于，连线变体直接编码在加载的图数据中，因此整个画布更像一块聚焦于内置边行为的对照板。

数据是如何组织的

数据在 initializeGraph() 中以内联方式声明为一个 RGJsonData 对象，包含 rootId: 'a'、12 个节点和 12 条连线。在调用 setJsonData() 之前没有预处理步骤：该示例直接在代码中构造最终数据集并直接加载。

关键结构在 lines 数组中，而不是 nodes 数组。每条边记录都带有自己的渲染元数据，包括 lineShape、fromJunctionPoint、toJunctionPoint、showStartArrow、showEndArrow、color 和 useTextOnPath。这使得该数据集很容易映射到真实业务场景，在这些场景里，每条连接都有各自的视觉含义，例如工作流分支、依赖方向、集成路径或数据血缘标注。

relation-graph 的使用方式

index.tsx 使用 RGProvider 包裹该示例，MyGraph.tsx 则通过 RGHooks.useGraphInstance() 获取当前图实例。组件随后使用居中布局、固定的圆形节点默认值以及自定义层级间距来配置图。

实际的图加载只在 useEffect() 中执行一次。initializeGraph() 调用 setJsonData()，然后立即通过 moveToCenter() 和 zoomToFit() 重新定位视口，因此无需任何用户设置，就能看到准备好的对比场景。

本示例没有使用节点插槽、连线插槽、画布插槽或编辑 API。它依赖默认渲染器，并展示了在不使用自定义 SVG 或覆盖层 UI 的情况下，内置边选项可以做到什么程度。可见样式主要由图配置和数据中每条连线的颜色驱动。虽然导入了一个本地 SCSS 文件，但审阅过的 JSX 并没有挂载其中定义的 .my-graph 包装器，因此 CSS 覆盖是否构成最终渲染结果的一部分并不能被确认。

关键交互

唯一的自定义交互是检查性点击。点击节点会记录 RGNode 对象，点击连线会同时记录 RGLine 和对应的 RGLink。这些处理函数有助于开发者检查 relation-graph 为选中项返回了什么，但它们不会修改图、打开菜单或切换模式。

其余体验更偏向视觉对比，而不是主动操作。该示例预先准备好了所有连线变体，并在挂载时自动执行居中和适配视图，因此查看者可以立即观察这些差异。

关键代码片段

这个片段说明，该示例通过标准图配置来塑造整体场景，而不是依赖自定义渲染器。

const graphOptions: RGOptions = {
    checkedItemBackgroundColor: '#666666',
    defaultNodeShape: RGNodeShape.circle,
    defaultNodeWidth: 60,
    defaultNodeHeight: 60,
    defaultNodeBorderWidth: 1,
    layout: {
        layoutName: 'center',
        levelGaps: [200, 300]
    }
};

这个片段说明，图只从内联 RGJsonData 加载一次，然后被定位到适合查看的位置。

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

// ...

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

这个片段说明，正交走线和连接锚点是如何在每条连线记录中分别变化的。

{ from: 'a', to: 'c', text: 'Bottom -> Left', lineShape: RGLineShape.StandardOrthogonal, fromJunctionPoint: RGJunctionPoint.bottom, toJunctionPoint: RGJunctionPoint.left },
{ from: 'a', to: 'b', text: 'LR -> LR', lineShape: RGLineShape.StandardOrthogonal, fromJunctionPoint: RGJunctionPoint.lr, toJunctionPoint: RGJunctionPoint.lr },
{ from: 'a', to: 'e', text: 'Top -> Right', lineShape: RGLineShape.StandardOrthogonal, fromJunctionPoint: RGJunctionPoint.top, toJunctionPoint: RGJunctionPoint.right },
{ from: 'a', to: 'i', text: 'LR -> LR', lineShape: RGLineShape.StandardOrthogonal, fromJunctionPoint: RGJunctionPoint.lr, toJunctionPoint: RGJunctionPoint.lr },

这个片段说明，在相同端点上复制的连线如何形成一组箭头方向对比。

{ from: 'i', to: 'm', text: 'Data: i > m, But Displayed as m > i', showStartArrow: true, showEndArrow: false, color: '#00ced1' },
{ from: 'i', to: 'm', text: 'Data：i > m', showStartArrow: false, showEndArrow: true, color: 'rgba(255, 140, 0, 1)' },

这个片段说明，普通的 Curve5 标签和沿路径排布的标签之间有什么区别。

{ from: 'e', to: 'p3', text: 'The text does not follow along this line.', lineShape: RGLineShape.Curve5, color: '#ffd700' },
{ from: 'e', to: 'p4', text: 'The text can follow along this line.', useTextOnPath: true, lineShape: RGLineShape.Curve5, color: '#ffd700' }

这个示例的独特之处

与附近的示例相比，这个示例值得注意的地方在于，它用很少的脚手架展示了很多内容。对比数据表明，它的突出模式是：围绕一个小型居中布局图构建的最小查看器，大部分要点都来自 RGJsonData 中每条连线的元数据，而不是插槽、自定义 SVG 标记、工具面板或编辑工具。

与 line 相比，它的差异在于紧凑性而非覆盖面。line 覆盖了更广泛的连线配置面，并带有更多 UI 和更多渲染变体，而这个示例去掉了这些额外表层，使内置字段更容易被单独观察。与 bothway-tree-faq 相比，它并不聚焦于某一个箭头方向问题；它把箭头方向、连接锚点走线以及 Curve5 标签行为组合到同一个预设画布中。与 show-single-nodes 和 node-menu-2 这类示例相比，它的可复用价值在于，仅通过数据字段控制边的呈现，而不是依赖预处理技巧或基于插槽的覆盖层。

最有辨识度的细节，是它在几乎重复的连接上使用了成对的微型对比。两条 i -> m 连线对比了起始箭头与结束箭头的显示，两条 e -> p* 连线则对比了普通标签与 useTextOnPath。这使得该示例在团队想快速确认哪些内置标志会影响连线表现，而又不想先进入自定义渲染时，特别适合作为参考。

这种模式还能应用在哪里

这种模式很适合迁移到那些“连接的含义”和“节点的含义”同样重要的图中。例如带有不同分支语义的审批流、强调上游或下游方向的服务依赖图、需要对传输与派生做不同视觉处理的数据血缘图，以及连接锚点选择有助于解释路径方向的网络图。

它也适合作为文档与 QA 模式。团队可以像这样构建一个小型对比图，在决定投入自定义插槽、自定义标记或更大的图编辑器之前，先验证内置连线选项的实际行为。在培训材料中，同样的结构也可以作为一块紧凑的参考板，帮助开发者了解哪些连线元数据字段会改变走线、箭头和文本行为。

内置线条渲染选项