通过实时布局与连线控制微调树形图

这个示例构建了什么

这个示例围绕一份预先准备好的层级数据，构建了一个全高度的树形布局交互调试场景。画布中展示的是一棵紧凑的单色蓝色树，带有盒状的连线标签、位于底部居中的内置工具栏，以及悬浮在图上方的白色控制窗口。

用户可以切换树的朝向、调整水平和垂直间距、重新设置所有已渲染连线的样式、移动连线标签偏移、修改滚轮和拖拽行为，并将当前画布导出为图片。这个示例的重点不是数据编辑，而是在已加载的图实例上进行实时展示调优。

数据是如何组织的

图数据以内联方式声明为一个 RGJsonData 对象，包含 rootId、扁平的 nodes 数组和扁平的 lines 数组。每个节点只使用简单的 id 和 text，每条连线使用 id、text、from 和 to。这样可以让示例聚焦于布局与样式行为，而不是特定业务领域的内容。

在调用 setJsonData() 之前没有预处理步骤。initializeGraph() 会直接加载这份准备好的树数据，然后执行居中与适配。另有一个单独的 React