[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:custom-mixed-subgraph-layouts":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 在一个固定画布上组合五种子图布局\n\n## 这个示例构建了什么\n\n这个示例构建了一个单一的 `relation-graph` 场景，看起来像是由五个独立子图拼贴在同一个画布上。左、右、上、下以及右下区域分别使用不同的布局策略，但它们仍然被加载到同一个图实例中，并一起显示在同一个视口里。\n\n用户会看到按颜色区分的节点分组、明显不同的连线样式，以及悬浮在图上方的白色辅助窗口。这个窗口可以拖拽、最小化、切换为设置面板，还可以用来下载当前图像。图本身保持只读：点击节点和连线只会记录被选中的项目。这里最值得关注的是整体编排模式，而不是某一种布局本身。该示例展示了一个固定的基础画布如何同时承载多次子布局计算，其中还包括一个会通过同步力导布局持续运动的顶部子分组。\n\n## 数据如何组织\n\n数据是在 `initializeGraph()` 内部创建的一个内联 `RGJsonData` 对象。它包含一份静态的节点和连线列表，但每个节点都带有 `data.myGroupId` 标记，因此运行时可以在布局前将图拆分为 `left`、`right`、`top`、`bottom` 和 `bottom-righ",true,500,1782615389311]