在两种布局中实时控制连线端点间距

本示例构建了什么

本示例构建了一个用于比较连线端点间距的全屏对照面板。其中一个互不连通的子图会渲染为居中的环形聚类，并使用从边框到边框的直线连接；另一个子图则渲染为从左到右的树形结构，并使用带标签的曲线连接。一个悬浮面板会说明该行为、提供范围滑块，并开放继承而来的画布工具能力。

真正的重点不在示例数据本身，而在于你可以通过修改 junctionOffset，在运行时让每条连线的端点都从节点边框向外移开，然后在同一张画布上对比两种不同连接样式下的视觉效果。

数据是如何组织的

图被拆分为 MyGraph.tsx 中两个内联的 RGJsonData 对象：treeJsonData 和 centerJsonData。它们各自拥有自己的 rootId、nodes 和 lines，示例始终不会把它们合并成一个连通数据集。

在布局运行之前，这两个数据集都会先在代码中做预处理。树图节点会被设置为半透明，并使用透明填充。中心区域的节点会被重新设置为圆形且尺寸更小，中心区域的连线也会被切换为两端都使用 `RGJunc