使用 Graphology ForceAtlas2 布局
这是一个 relation-graph 示例:先渲染样例数据并读取节点实测尺寸,再执行 Graphology 圆形初始化 + ForceAtlas2 计算,并将缩放后的坐标写回固定布局场景。它还提供数据集切换、布局缩放调节,以及共享悬浮面板中的画布设置与图片导出。
在固定布局的 relation-graph Viewer 中使用 Graphology ForceAtlas2
这个示例构建了什么
这个示例构建了一个全高度的 relation-graph 查看器。它会加载两组示例网络中的一组,先让 relation-graph 渲染一次节点,以便获得节点的真实尺寸,然后再运行一次外部的 Graphology 布局计算,并将返回的坐标写回当前图中。最终的视觉结果是一个轻量级网络图:包含白色圆形节点、灰色直线连接、沿路径绘制的连线标签,以及悬浮在画布上方的辅助窗口。
用户可以切换数据集,通过缩放滑块拉伸或压缩返回的布局,拖动或最小化辅助窗口,打开画布设置,以及导出图片。这个示例的核心实现点是“渲染-测量-重新布局”这一流程:relation-graph 负责渲染和交互,而 Graphology 加上 ForceAtlas2 负责计算最终坐标。
数据是如何组织的
图数据直接在 initializeGraph() 中以内联方式声明为一个 RGJsonData 对象,其中包含 rootId、一个扁平的 nodes 数组,以