[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:automatic-layout-preset-switching":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 让同一张图在四种内置布局之间自动轮换\n\n## 此示例构建了什么\n\n这个示例构建了一个全高的 relation-graph 画布，把一份固定的分支型数据集变成一个布局对比界面。同一组节点和连线会分别以 `center`、从左到右的 `tree`、`circle` 和 `force` 布局显示，同时一个小型浮动窗口始终悬浮在画布上方。\n\n用户可以暂停或恢复自动轮换，拖动或最小化辅助窗口，打开共享的画布设置浮层，修改滚轮和拖拽行为，并将当前图导出为图片。这个示例的重点不是自定义渲染，也不是数据编辑，而是展示一种紧凑模式：同一张已挂载的图在运行时更新布局选项后，会如何改变形态。\n\n## 数据如何组织\n\n数据位于 `initializeGraph()` 内部，以一个内联的 `RGJsonData` 对象存在，包含 `rootId: 'a'`、一个扁平的 `nodes` 数组，以及一个带有显式连线 id 的扁平 `lines` 数组。整张图由一个根节点、四个一级分支，以及每个分支下的若干叶子节点组成。\n\n在调用 `setJsonData()` 之前没有预处理步骤。这个示例是在原地构造完整载荷，",true,500,1782615429610]