[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:multi-group-layout-style-editor":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 在固定画布上编辑多个图分组\n\n## 这个示例实现了什么\n\n这个示例构建的不是一张预加载的图表，而是一个轻量级的图工作台。页面展示了一个全屏的 `RelationGraph` 画布，带有深色网格背景、一个悬浮的白色控制窗口、一个小地图，以及用于当前编辑分组的选中覆盖层。\n\n用户可以在运行时插入新的图分组。每个插入的分组都会生成为一棵随机树，放置在指定的根坐标附近，并拥有各自的节点样式、连线样式和布局算法。插入之后，点击该分组中的任意节点，会将整个分组提升为可编辑选区，并暴露出批量重新布局、批量改样式和删除操作。\n\n这个示例的重点并不只是抽象地展示“混合布局”。它展示的是：如何在保持外层画布固定的同时，把每个子图当作一个可以独立设置样式、独立执行布局的模块来处理。\n\n## 数据如何组织\n\n源数据最初是由 `generateRandomTreeData(...)` 生成的树形 `JsonNode` 结构。它的配置项不多，但表达力足够：`depth`、`childCount` 和 `hasChildrenProbability` 定义了每个生成分组的规模以及分支的稠密程度。\n\n在数据传入 ",true,500,1782615390645]