[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:connected-component-layout-and-theme-switcher":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 为单个连通分量切换主题和布局\n\n## 这个示例构建了什么\n\n这个示例构建了一个全屏图谱工作台，在同一块画布上挂载两组彼此断开的 relation-graph 数据集。用户点击任意节点后，会选中该节点所属的整个连通分量，然后通过一个跟随选区移动的悬浮工具栏，仅切换这个连通分量的主题或布局。图谱覆盖层中始终显示一个 minimap，同时还有一个可拖拽的辅助窗口，用于暴露画布设置和导出图片功能。\n\n这个示例的关键结果是：在混合画布中进行局部编辑。这个 demo 不会一次性重设整个图谱的样式或重新布局。它会保持另一个断开的网络孤岛不变，只对当前选中的连通分量进行重新着色、重设形状、重排连线和重新布置。\n\n## 数据是如何组织的\n\n`MyGraph.tsx` 内联定义了两个 `RGJsonData` 对象：`network1JsonData` 和 `network2JsonData`。每个对象都包含自己的 `rootId`、`nodes` 和 `lines`。这两组数据通过分别调用 `addNodes()` 和 `addLines()` 推入同一个图实例，因此画布初始状态就是一个包含两个断开",true,500,1782615430032]