[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:orthogonal-line-label-styling":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 正交树连线上的独立背景标签\n\n## 这个示例构建了什么\n\n这个示例构建了一个小型树形查看器，它的连线采用正交布线，并使用分离式文本徽标，而不是把文字直接绘制在路径上。画布经过了刻意的风格化处理，具有暖色渐变背景、半透明节点以及带边框的连线标签，因此这个示例的主要视觉要点既包括几何布局，也包括可读性。\n\n用户可以将树旋转到左、右、上或下方向，然后通过一个浮动控制面板微调每个内置连线标签的 x 和 y 偏移量。这个共享窗口还暴露了通用画布设置和截图导出功能，但本示例的核心仍然是正交布线、盒状标签以及面向方向的布局预设这三者的组合。\n\n## 数据如何组织\n\n图数据以内联方式声明为一个 `RGJsonData` 对象，其中包含 `rootId: 'a'`、一个扁平的 `nodes` 数组和一个扁平的 `lines` 数组。每条连线都带有一个 `text` 值，例如 `￥30.23 K`，因此这些标签来自普通关系数据，而不是来自自定义 slot 渲染器。\n\n在初始 `setJsonData()` 调用之前，这里没有 fetch 层，也没有预处理步骤。唯一的运行时转换发生在图加载之后：当布局方",true,500,1782615382351]