正交树连线上的独立背景标签

这个示例构建了什么

这个示例构建了一个小型树形查看器，它的连线采用正交布线，并使用分离式文本徽标，而不是把文字直接绘制在路径上。画布经过了刻意的风格化处理，具有暖色渐变背景、半透明节点以及带边框的连线标签，因此这个示例的主要视觉要点既包括几何布局，也包括可读性。

用户可以将树旋转到左、右、上或下方向，然后通过一个浮动控制面板微调每个内置连线标签的 x 和 y 偏移量。这个共享窗口还暴露了通用画布设置和截图导出功能，但本示例的核心仍然是正交布线、盒状标签以及面向方向的布局预设这三者的组合。

数据如何组织

图数据以内联方式声明为一个 RGJsonData 对象，其中包含 rootId: 'a'、一个扁平的 nodes 数组和一个扁平的 lines 数组。每条连线都带有一个 text 值，例如 ￥30.23 K，因此这些标签来自普通关系数据，而不是来自自定义 slot 渲染器。

在初始 setJsonData() 调用之前，这里没有 fetch 层，也没有预处理步骤。唯一的运行时转换发生在图加载之后：当布局方