节点与连线提示框及右键菜单
这个示例展示如何在 relation-graph 查看器中为节点和连线同时挂载自定义悬停提示与右键菜单。它通过图命中检测、相对视图的覆盖层定位和插槽渲染,让这些面板始终对齐在图表面内;共享辅助窗还提供画布设置和图片导出。
节点与连线的自定义提示框和右键菜单
这个示例构建了什么
这个示例构建了一个查看器风格的 relation graph,并提供两类上下文浮层:悬停提示框和右键菜单。用户会看到一个全屏图谱,其中包含圆形的图标节点、带标签的曲线连线、点状画布背景,以及一个悬浮的辅助窗口。悬停在节点上时,会显示其标签和图标键;悬停在连线上时,会显示其标签以及解析后的源节点和目标节点;右键点击任一目标时,会在指针附近打开对应的专用菜单。
最重要的点不在于示例数据集本身。这个示例是一个紧凑的参考,用来说明如何同时为节点和连线挂载自定义检查 UI,并且让这些面板保留在图谱视图层中,而不是把它们硬编码进页面布局。
数据是如何组织的
图数据直接在 initializeGraph() 内声明为一个 RGJsonData 对象。它使用一个 rootId、一个扁平的 nodes 数组,以及一个 lines 数组。每个节点都带有 data.myicon 字段,而每条连线都具有显式的 id 和 text 标签。
在调用 setJsonData() 之前,没有单独的数