[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:d3-treemap-pack-layout-integration":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 在 relation-graph 中切换 D3 Treemap 与 Circle-Pack 布局\n\n## 这个示例构建了什么\n\n这个示例构建了一个全高度的层级结构演示场景，在其中，同一份已加载的关系图可以通过两种不同的 D3 层级算法重新排布。画布展示的是一棵通用树形节点结构，悬浮说明面板提供布局选择器，内置 mini-view 则持续作为当前排布的总览可见。\n\n关键的视觉结果是：同一张图无需替换 relation-graph 场景本身，就可以在 treemap 风格的矩形与 circle-pack 气泡之间切换。自定义节点渲染、连线标签、minimap 以及共享画布工具都保持可用，变化的只有布局计算。\n\n## 数据如何组织\n\n该示例从 `initializeGraph()` 内部的一个静态内联 `RGJsonData` 对象开始。它声明了一个 `rootId`、一个扁平的 `nodes` 数组和一个扁平的 `lines` 数组，然后在将数据加载进图之前，用 `L${index}` 为缺失的连线 id 回填。\n\n这个内联 JSON 只是数据流的第一阶段。在执行 `setJsonDa",true,500,1782615393404]