[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:adjustable-graph-minimap":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 大型力导布局图的可调缩略图覆盖层\n\n## 这个示例构建了什么\n\n这个示例构建了一个全屏力导布局图查看器，并始终显示一个缩略图覆盖层。画布被有意设计得相当繁忙：一百多个节点散布在深色的点状背景上，节点的大小和形状各不相同，而缩略图始终覆盖在图之上，因此用户在导航时也能持续掌握整体结构。\n\n用户可以把缩略图移动到任意角落，使用独立的宽度和高度滑块调整它的尺寸，拖动或最小化这个浮动辅助窗口，打开一个共享设置面板来配置画布滚轮和拖拽行为，并将当前图下载为图片。这个示例最核心的教学点在于，`RGMiniView` 并没有被当作被动的脚手架。它是作为一个覆盖层组件挂载的，并直接由 React state 控制。\n\n## 数据是如何组织的\n\n数据在 `initializeGraph()` 内联声明为一个 `RGJsonData` 对象，包含 `rootId: 'a'`、103 个节点和 102 条连线。从结构上看，它是一个大型分支层级，但节点标签只是像 `b4-7` 和 `e2-9` 这样的通用标识符，因此这份数据集承担的是导航载体的作用，而不是领域内容本身。\n\n在调用 `setJsonData",true,500,1782615409344]