本文介绍了图算法在前端领域的应用，尤其是可视化中的布局算法。包括了几何布局如网格、环形、同心圆和辐射状布局，层级布局如DAGre、广度优先和Eclipse布局，力导布局如Fruchterman-Reingold、cola和Euler，以及其他布局如MDs和随机布局。文章详细解析了Fruchterman-Reingold和MDS算法的实现原理，并提供了Antv G6和Cytoscape的源码示例。最后，讨论了图布局的智能预测和与前端智能化的结合可能性。
前言
图算法在前端领域考察的较少，一般除非是要写框架或者打包工具对依赖关系处理（DAG）会用到，前端对图算法的考察一般是比较少的，而对于可视化领域而言，图又是必不可少的一种展示方式，其中对于边和节点的展示布局方案结合美学效果会有不同的算法实现，本文旨在介绍一些常见的通用布局算法，其中的每个小的布局方案也会有不同的分支实现
分类
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-56SV0h5w-1619266987469)(https://vleedesigntheory.github.io/tech/front/graph20210419/graph.png)]
| 简写 | 算法名称 | 分类 | 备注 |
|---|---|---|---|
| grid | 网格布局算法 | 几何布局 | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XJopwBTT-1619266987474)(https://vleedesigntheory.github.io/tech/front/graph20210419/grid.png)] |
| circle | 环形布局算法 | 几何布局 | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hhQETJYM-1619266987476)(https://vleedesigntheory.github.io/tech/front/graph20210419/circle.png)] |
| concentric | 同心圆布局算法 | 几何布局 |  |
| radial | 辐射状布局算法 | 几何布局 |  |
| avsdf | 邻接点最小度优先算法（Adjacent Vertex with Smallest Degree First） | 几何布局 |  |
| dagre | 有向无环图树布局算法（Directed Acyclic Graph and Trees） | 层级布局 |  |
| breadthfirst | 广度优先布局算法 | 层级布局 |  |
| elk | Eclipse布局算法（Eclipse Layout Kernel） | 层级布局 |  |
| klay | K层布局算法（K Lay） | 层级布局 |  |
| fcose | 最快复合弹簧内置布局算法（Fast Compound Spring Embedder） | 力导布局 |  |
| cola | 约束布局（Constraint-based Layout） | 力导布局 |  |
| cise | 环形弹簧内置布局算法（Circular Spring Embedder） | 力导布局 |  |
| elk2 | Eclipse布局算法（Eclipse Layout Kernel） | 力导布局 |  |
| euler | 欧拉布局算法 | 力导布局 |  |
| spread | 扩展布局算法 | 力导布局 |  |
| fruchterman | Fruchterman-Reingold布局算法 | 力导布局 |  |
| combo | 混合布局算法 | 力导布局 |  |
| mds | 高维数据降维布局算法（Multi Dimensional Scaling） | 其他布局算法 |  |
| random |
最低0.47元/天 解锁文章
扫一扫
3308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
