[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:toolbar-buttons":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 带可切换小地图的自定义工具栏按钮\n\n## 这个示例构建了什么\n\n这个示例构建了一个小型图谱查看器，它隐藏了 relation-graph 的默认工具栏，并使用自定义覆盖层控件替代它。用户会看到一个居中的示例图谱、左上角的纵向迷你工具栏、一个标准工具栏，以及右上角第二个可显示或隐藏小地图的迷你工具栏。这个示例的核心要点是：如何将 relation-graph 的工具栏容器复用为项目自定义按钮的外壳，而不是直接接受默认的图谱界面组件。\n\n## 数据是如何组织的\n\n图数据在 `initializeGraph` 内以内联方式声明为一个静态 `RGJsonData` 对象，包含 `rootId: 'a'`、五个节点和四条连线。在调用 `setJsonData` 之前，没有获取数据的步骤，也没有转换流水线；唯一的预处理就是直接构造这份数据集，以及为每个节点设置诸如 `color`、`nodeShape`、`width` 和 `height` 之类的视觉覆盖项。在真实应用中，同样的结构可以表示人员与汇报关系、服务与依赖关系，或设备与上游连接。\n\n## relation-graph 是如何使用的\n",true,500,1782615420582]