[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:io-tree-layout-orientation-and-link-routing":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# IO Tree 布局方向与连线路由\n\n## 这个示例构建了什么\n\n这个示例围绕一个根节点以及一组有方向的入向和出向分支，构建了一个只读的 IO tree 查看器。同一张图可以在自上而下和从左到右的 `io-tree` 预设之间切换，同时保持紧凑的矩形节点和正交连接线。\n\n用户可以改变布局方向、切换布局过程中节点尺寸是否允许变化、通过嵌入式 mini view 检查图形，并打开共享的画布设置浮层。这个示例最重要的教学点，是在 relation-graph 已经计算出节点层级之后，再通过布局后的路由处理阶段重写连线拐点锚点。\n\n## 数据是如何组织的\n\n数据以内联方式声明为一个静态 `RGJsonData` 对象，其中包含 `rootId: 'root'`、扁平的 `nodes` 数组和扁平的 `lines` 数组。连线方向很关键：有些分支指向根节点一侧的路径，有些分支则从该路径向外延伸，这让 `io-tree` 布局具备了足够的结构，能够在同一画布上表示入向和出向关系。\n\n在 `setJsonData` 之前没有任何预处理。主要转换发生在初始加载之后以及每次重新布局之后，此时组件会遍",true,500,1782615391888]