[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:tree-layout-line-options":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 通过实时布局与连线控制微调树形图\n\n## 这个示例构建了什么\n\n这个示例围绕一份预先准备好的层级数据，构建了一个全高度的树形布局交互调试场景。画布中展示的是一棵紧凑的单色蓝色树，带有盒状的连线标签、位于底部居中的内置工具栏，以及悬浮在图上方的白色控制窗口。\n\n用户可以切换树的朝向、调整水平和垂直间距、重新设置所有已渲染连线的样式、移动连线标签偏移、修改滚轮和拖拽行为，并将当前画布导出为图片。这个示例的重点不是数据编辑，而是在已加载的图实例上进行实时展示调优。\n\n## 数据是如何组织的\n\n图数据以内联方式声明为一个 `RGJsonData` 对象，包含 `rootId`、扁平的 `nodes` 数组和扁平的 `lines` 数组。每个节点只使用简单的 `id` 和 `text`，每条连线使用 `id`、`text`、`from` 和 `to`。这样可以让示例聚焦于布局与样式行为，而不是特定业务领域的内容。\n\n在调用 `setJsonData()` 之前没有预处理步骤。`initializeGraph()` 会直接加载这份准备好的树数据，然后执行居中与适配。另有一个单独的 React ",true,500,1782615384316]