Javascript图形布局算法

Javascript graph layout algorithm

本文关键字:算法 布局 图形 Javascript      更新时间:2024-02-15

TL;DR

我需要通过 JavaScript 代码以编程方式设置图形的布局。

解释

我有一个这种格式的图表:

var graph = {
    "nodes": [
        {"x": 0, "y": 0},
        {"x": 0, "y": 0},
        {"x": 0, "y": 0},
        {"x": 0, "y": 0},
    ],
    "edges": [
        {"source":  0, "target":  1},
        {"source":  1, "target":  2},
        {"source":  1, "target":  3},
        {"source":  3, "target":  2},
    ]
};

所有这些节点的XY值均为 0 。如果我们在画布上绘制它,图表显然看起来不会有任何好处。

我想在这个数据结构上应用一种算法,以便自动调整所有节点的XY值(边缘交叉最小(。

现有解决方案

我已经尝试了 D3 的力导向布局.js和一些类似的解决方案。但是它们需要太多的迭代,我的大多数图形都有 50 个节点>有很多边。

我正在寻找的算法应该以最小的复杂性和时间创建一个布局(或者它至少应该比迭代算法更快(。

Matlab有三个布局类型引擎用于其传记。 LayoutTypeValue可以是hierarchicalradialequilibrium。不过,径向似乎是个好主意。

谢谢。

如果这是在商业场景中,您可能需要查看 yFiles for HTML Javascript 图形绘图和布局库。

据我所知,它提供了可用于Javascript的最完整,最通用的自动图形布局实现。它们可以通过一个很好的Javascript API获得,并且不像像评论中的"emscripten"建议那样的黑盒命令行解决方案。

请参阅此广泛的交互式自动布局演示,其中显示了许多可用的自动布局选项。

大多数(但不是所有设置的全部(算法在这种大小的图形(几百个元素(上表现得很好。

可用布局的(非详尽(列表是

  • 层次
  • 树状
  • 力导向
  • 循环
  • 气球
  • 正交
  • 径向
  • 各种专用边缘路由实施

披露:我为创建该库的公司工作,但我不代表我的雇主参与 SO。这是我自己的评论和意见。