JavaScript is required

自定义工具栏按钮

这个示例展示如何关闭 relation-graph 内置工具栏,并通过 `RGSlotOnView` 挂载自定义控制。它结合 `RGToolBar`、两种 `RGMiniToolBar` 变体、用于镜像收藏按钮的共享 React 状态,以及可切换的 `RGMiniView` 和轻量 SCSS 样式。

在 GraphPilot 中编辑

带可切换小地图的自定义工具栏按钮

这个示例构建了什么

这个示例构建了一个小型图谱查看器,它隐藏了 relation-graph 的默认工具栏,并使用自定义覆盖层控件替代它。用户会看到一个居中的示例图谱、左上角的纵向迷你工具栏、一个标准工具栏,以及右上角第二个可显示或隐藏小地图的迷你工具栏。这个示例的核心要点是:如何将 relation-graph 的工具栏容器复用为项目自定义按钮的外壳,而不是直接接受默认的图谱界面组件。

数据是如何组织的

图数据在 initializeGraph 内以内联方式声明为一个静态 RGJsonData 对象,包含 rootId: 'a'、五个节点和四条连线。在调用 setJsonData 之前,没有获取数据的步骤,也没有转换流水线;唯一的预处理就是直接构造这份数据集,以及为每个节点设置诸如 colornodeShapewidthheight 之类的视觉覆盖项。在真实应用中,同样的结构可以表示人员与汇报关系、服务与依赖关系,或设备与上游连接。

relation-graph 是如何使用的