JavaScript is required

最短路径查询

这个示例加载人物关系图,从实时 relation-graph 实例中提取可搜索端点选项,并允许用户查询两个选定节点之间的最短连接。随后它将结果映射回画布:弱化无关节点与连线,同时加粗活动路径,并放在可拖拽工具窗中操作。

在 GraphPilot 中编辑

实时关系图上的最短路径查询

本示例构建的内容

这个示例在一个已经渲染完成的人物关系图之上构建了一个关系路径探索器。用户会看到一个由头像节点和带标签关系线组成的力导向画布,以及一个悬浮的白色查询窗口,用户可以在其中选择起始人物和目标人物。

当两个端点都被选中后,示例会从实时的 relation-graph 实例中计算最短连接路径,并将结果应用回当前画布。当前路径会保持高亮,无关节点和连线会淡化为较低透明度,而同一个悬浮窗口还提供共享的画布设置和图片导出功能。

数据如何组织

加载后的图数据遵循 RGJsonData 结构,包含 rootIdnodes 数组和 lines 数组。每个节点都带有 id、显示文本、边框和填充颜色,以及存放在 data.icon 中的头像 URL。每条连线保存其两端节点、诸如 teacher-studentrelative 这样的关系标签、显示颜色,以及放在 data.type 中的语义类型。

在调用 setJsonData() 之前几乎没有做预处理:fetchJsonData()