JavaScript is required

自定义工具栏与跨层提示框

这个示例展示如何关闭 relation-graph 内置工具栏,并在 `RGSlotOnView` 中放置自定义悬浮工具栏。它还演示了跨层悬浮提示系统:覆盖工具栏按钮、view 插槽锚点、canvas 插槽锚点、节点插槽内容以及图渲染的节点/连线,依靠递归 tooltip 发现与图命中检测实现。

在 GraphPilot 中编辑

构建带跨层提示框的自定义工具栏

这个示例构建了什么

这个示例构建了一个只读的 relation-graph 场景:它用一个悬浮的自定义工具栏替代内置工具栏,并让同一套悬停系统贯穿多个图层表面。用户会看到一个小型示例图、一组浅色的纵向工具栏、位于 view 层的四个提示锚点、位于 canvas 层的另外两个锚点、自定义节点内容,以及当指针在这些元素之间移动时出现的深色提示卡片。

重点并不只是“带英文提示的工具栏图标”。同一个包装层级的悬停流程还覆盖了自定义节点插槽中的一个徽标,并且当指针不再位于自定义 HTML 上时,会回退到图中渲染的节点和连线。这让该演示成为一个紧凑的参考案例,适合那些需要在同一场景中混合 overlay DOM 与原生图对象的产品。

数据如何组织

图数据在 initializeGraph() 中以内联方式组装为一个静态 RGJsonData 对象,其中包含 rootId: 'a'、四个节点和七条连线。节点记录本身已经带有视觉覆盖配置,包括 colorfontColornodeShapewidth 和 `he