JavaScript is required

Dagre位置布局运行时控制

这个示例构建固定布局 relation-graph 场景,让 relation-graph 负责节点渲染与测量,再把位置计算交给 Dagre。重点是如何在运行时保持 Dagre 的 ranker 和间距参数可调,同时保留自定义节点卡片、正交带标签连线、小地图和共享画布工具。

在 GraphPilot 中编辑

固定 relation-graph 场景中的 Dagre 运行时位置调优

这个示例构建了什么

这个示例构建了一个全屏、只读的 relation-graph 查看器。它会加载一份静态网络,让 relation-graph 完成节点渲染与尺寸测量,然后仅使用 Dagre 计算节点位置。最终视图保留了自定义节点卡片、带标签的正交连接线、浮动辅助窗口以及小地图,而不是切换到 Dagre 专用渲染器。

用户可以在同一个图实例保持挂载的情况下,重新调整 Dagre 的 rankernodesepranksep。他们还可以拖动或最小化辅助窗口、打开共享画布设置、导出图片,并通过内嵌的小视图检查重新布局后的图。这个示例的重点是运行时重新布局循环,而不只是初始的 Dagre 接入。

数据是如何组织的

数据集以内联方式声明为一个 RGJsonData 对象,其中包含 rootId: 'root'、一个扁平的 nodes 数组以及一个扁平的 lines 数组。节点文本刻意保持通用,这样示例就能把重点放在布局行为上,而不是业务语义上。

在自定义布