[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:connected-subnetwork-layout-switcher":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 为选中的连通子网络切换布局\n\n## 这个示例构建了什么\n\n这个示例构建了一个单一的 relation-graph 画布，其中包含两个彼此断开的图岛，并允许用户只对当前点击节点周围的图岛重新布局。界面组合了主图、小地图、一个浮动辅助窗口，以及一个显示在当前活动编辑分组上方的小型预设选择器。\n\n核心行为是“以选中范围为作用域的重新布局”。这个示例不是切换整个画布的布局，而是检测被点击节点所属的连通子网络，并仅对这一组应用四种预设之一：`center`、从左到右的 `tree`、`circle`，或经过调优的 `force` 布局。\n\n## 数据是如何组织的\n\n图数据由两个内联的 `RGJsonData` 对象组装而成。每个数据集都声明了一个 `rootId`、一个 `nodes` 数组，以及一个带有显式连线 id 的 `lines` 数组。这个示例不会在布局前先把数据预处理成单独的分组模型，而是通过 `addNodes()` 和 `addLines()` 将两个数据集都追加到同一个已挂载的图实例中，执行 `doLayout()`，然后在运行时依赖图的连通性来发现当前活动的子网络。\n\n这",true,500,1782615390061]