[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:orthogonal-line-label-controls":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 正交连线标签控制\n\n## 这个示例构建了什么\n这个示例构建了一个紧凑的树形布局实验环境，用于演示正交连接线上的分离式文本标签。画布展示了一棵固定的示例树，节点标签为纯黑色，连线标签为蓝色；同时，一个悬浮的工具窗口允许用户旋转树的方向、调整连线文本的位置、切换文本锚点，并微调标签偏移和折线几何。其主要结果是：当相同的关系通过不同的正交方向重新布线时，用户可以并排对比标签的可读性。\n\n## 数据是如何组织的\n图数据是一个内联的 `RGJsonData` 对象，包含一个 `rootId`、一个扁平的 `nodes` 数组，以及一个定义树边的 `lines` 数组。在调用 `setJsonData` 之前没有 fetch 步骤，也没有领域特定的预处理；组件直接加载准备好的示例数据，然后执行布局。在真实应用中，相同的数据结构可以表示审批链、分类树、调用层级、依赖树，或任何需要可读边标签的父子关系。\n\n## relation-graph 是如何使用的\n`index.tsx` 使用 `RGProvider` 包裹整个示例，`MyGraph.tsx` 则通过 `RGHooks.useGraphIn",true,500,1782615381164]