IO Tree 布局方向与连线路由

这个示例构建了什么

这个示例围绕一个根节点以及一组有方向的入向和出向分支，构建了一个只读的 IO tree 查看器。同一张图可以在自上而下和从左到右的 io-tree 预设之间切换，同时保持紧凑的矩形节点和正交连接线。

用户可以改变布局方向、切换布局过程中节点尺寸是否允许变化、通过嵌入式 mini view 检查图形，并打开共享的画布设置浮层。这个示例最重要的教学点，是在 relation-graph 已经计算出节点层级之后，再通过布局后的路由处理阶段重写连线拐点锚点。

数据是如何组织的

数据以内联方式声明为一个静态 RGJsonData 对象，其中包含 rootId: 'root'、扁平的 nodes 数组和扁平的 lines 数组。连线方向很关键：有些分支指向根节点一侧的路径，有些分支则从该路径向外延伸，这让 io-tree 布局具备了足够的结构，能够在同一画布上表示入向和出向关系。

在 setJsonData 之前没有任何预处理。主要转换发生在初始加载之后以及每次重新布局之后，此时组件会遍