JavaScript is required

图谱主题与布局预设切换

这个示例在同一份 relation-graph 数据挂载状态下,让用户通过画布内工具栏同时切换主题预设和布局预设。它展示了如何批量更新节点与连线 class、应用更丰富的布局预设对象,并将导出与画布控制保留在同一查看器壳层中。

在 GraphPilot 中编辑

在同一张图中切换主题和布局预设

这个示例构建了什么

这个示例围绕一个固定的 relation-graph 数据集,构建了一个全屏图谱展示工作台。画布初始为树形布局,随后用户可以打开调色板弹出层,应用七种项目级主题之一,或打开网络弹出层,在 center、tree、folder、circle 和 io-tree 布局预设之间切换。一个缩略图会始终显示在图谱叠层中,另有一个可拖拽的辅助窗口用于提供画布设置和图片导出功能。

真正重要的结果并不是示例数据本身。重点在于:一个已经挂载的图实例在内存中保持同一组节点和连线不变,同时在运行时切换它的视觉外观、节点几何形状、连接线样式以及布局族。

数据如何组织

数据在 initializeGraph() 内以内联方式声明为一个符合 RGJsonData 形状的对象,其中包含 rootIdnodeslines。节点使用了诸如 g2-ag2-cg2-c1 这样的简单 ID,连线则定义了它们之间的父子关系。这使得数据集易于阅读,同时仍然覆盖了向上和向下的分支,这对于在同一拓扑上比较不同