[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:center-and-tree-layout-composition":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 在一个固定画布上组合 `center` 与 `tree` 布局\n\n## 这个示例构建了什么\n\n这个示例构建了一个只读的 `relation-graph` 查看器，在同一张画布中放置两个彼此断开的子网络。其中一个子图被绘制为以中心为焦点的聚簇，另一个则被绘制为从左到右展开的树，并放置在该聚簇的右侧。\n\n用户会在同一个视口中看到两个明显不同的视觉区域：左侧是带有直线连线的半透明圆形节点，右侧是带有黑色曲线连线的较宽矩形节点。他们可以平移和缩放图谱，使用右下角内置工具栏，拖动或最小化浮动辅助窗口，在其设置面板中切换画布交互模式，并将当前视图导出为图片。这个示例的核心价值在于布局编排：一个固定宿主画布、两次独立的布局执行，以及一次基于边界范围的交接。\n\n## 数据如何组织\n\n数据直接在 `MyGraph.tsx` 中声明为两个内联的 `RGJsonData` 对象：`treeJsonData` 的根节点为 `a`，`centerJsonData` 的根节点为 `2`。该示例不会对一个合并后的结构调用 `setJsonData(...)`。相反，它通过分别调用 `addNodes(...)`",true,500,1782615389057]