Javascript图形布局算法
Javascript graph layout algorithm
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},
]
};
所有这些节点的X
和Y
值均为 0
。如果我们在画布上绘制它,图表显然看起来不会有任何好处。
我想在这个数据结构上应用一种算法,以便自动调整所有节点的X
和Y
值(边缘交叉最小(。
现有解决方案
我已经尝试了 D3 的力导向布局.js和一些类似的解决方案。但是它们需要太多的迭代,我的大多数图形都有 50 个节点>有很多边。
我正在寻找的算法应该以最小的复杂性和时间创建一个布局(或者它至少应该比迭代算法更快(。
Matlab有三个布局类型引擎用于其传记。 LayoutTypeValue
可以是hierarchical
、radial
和equilibrium
。不过,径向似乎是个好主意。
谢谢。
如果这是在商业场景中,您可能需要查看 yFiles for HTML Javascript 图形绘图和布局库。
据我所知,它提供了可用于Javascript的最完整,最通用的自动图形布局实现。它们可以通过一个很好的Javascript API获得,并且不像像评论中的"emscripten"建议那样的黑盒命令行解决方案。
请参阅此广泛的交互式自动布局演示,其中显示了许多可用的自动布局选项。
大多数(但不是所有设置的全部(算法在这种大小的图形(几百个元素(上表现得很好。
可用布局的(非详尽(列表是
- 层次
- 树状
- 力导向
- 循环
- 气球
- 正交
- 径向
- 各种专用边缘路由实施
披露:我为创建该库的公司工作,但我不代表我的雇主参与 SO。这是我自己的评论和意见。
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 使用agility.js进行页面布局和合成
- 同位素库错误:未捕获错误无布局模式包装生产线8
- 如何实现此布局
- 有没有一个javascript图形绘制库可以进行气球树布局
- 循环比赛位置算法
- javascript扫雷器floodfill算法不能正常工作
- vaadin:使用自定义布局集成angular js
- Node JS中的排名系统算法
- 查找仅适用于原始图像的图像放大算法的名称
- 在数组的 2/3 上调用自身的排序算法
- 布局中的项目管理
- 如何操作d3js树布局
- 在HTML/JavaScript中,有没有一种方法可以在图像开始加载时知道图像的最终布局尺寸
- 在链接d3强制布局中添加和删除类
- Javascript图形布局算法
- 在 d3 中禁用强制布局算法中的力
- 理解和实现基于力的图形布局算法
- D3圆形包装布局算法
- 二维布局优化算法