[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:curved-line-path-text-controls":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 控制曲线关系图连线上的文本\n\n## 这个示例构建了什么\n\n这个示例构建了一棵固定的、从左到右展开的树，关系标签直接渲染在曲线边路径上。画布本身保持简洁，但一个悬浮控制窗口允许用户比较三种曲线连线族、切换连接锚点、沿路径移动标签、修改文本对齐方式，并调节偏移量与可见文本长度。\n\n重点不在于自定义绘制，而是在于作为一个聚焦的参考示例，展示如何借助 relation-graph 内置的连线渲染器和实时实例 API，让曲线连接器上的长边标签更易读。\n\n## 数据是如何组织的\n\n图数据是在 `MyGraph.tsx` 中以内联方式定义的一个静态 `RGJsonData` 对象。它使用 `rootId: 'a'`，包含十六个硬编码节点和十五条硬编码连线，并且每条连线都重复相同的长文本：`These relationship texts are very long`。\n\n这里没有获取数据的步骤，也没有在调用 `setJsonData()` 之前做预处理。准备工作发生在 options 对象中：连线形状、连接点、连线文本长度以及布局设置，都会在图渲染之前根据 React state 或本地字面量推",true,500,1782615380686]