主要用来记录对比目前流行的可视化类库渲染`关系图`时的优缺点，包括 D3，ECharts，G6等。
D3（svg）
——-
文档：[d3js.org/](https://link.juejin.cn/?target=https%3A%2F%2Fd3js.org%2F “https://d3js.org/”)
优点：
* 可定制程度高
* svg 在数据量小时内存占用比 canvas 低
缺点：
* svg 在数据量大时渲染会卡顿
* 需要自己做性能优化
ECharts（canvas/svg）
——————-
文档：[echarts.apache.org/handbook/zh…](https://link.juejin.cn/?target=https%3A%2F%2Fecharts.apache.org%2Fhandbook%2Fzh%2Fget-started%2F “https://echarts.apache.org/handbook/zh/get-started/”)
优点：
* 可以根据数据量自主选择 canvas 或 svg 渲染
* 对大数据渲染有优化
* 支持 webGL（特别）
缺点：
* 只能绘制库预设的图表类型
G6（canvas）
———-
文档：[antv-g6.gitee.io/zh/docs/man…](https://link.juejin.cn/?target=https%3A%2F%2Fantv-g6.gitee.io%2Fzh%2Fdocs%2Fmanual%2Fgetting-started%2F “https://antv-g6.gitee.io/zh/docs/manual/getting-started/”)
优点：
* 内置 9 种一般图的布局和 4 种树图的布局算法
* 对大数据渲染有优化
缺点：
* 无预设图形
### 布局算法
[@antv/layout](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fantvis%2Flayout “https://github.com/antvis/layout”)
随机：Random 布局是 G6 中的默认布局方法。当实例化图时没有指定布局方法，且数据中也不存在位置信息时，G6 将自动使用 Random 布局。
GForce：GForce 实现了经典的力导向算法，G6 4.0 支持。能够更加自由地支持设置节点质量、群组中心力等。更重要的是，它支持 GPU 并行计算。
Force 力导向：Force 布局经典的力导向布局方法，与 d3 的力导向布局方法相对应。其属性也与 d3.js 的力导布局参数相对应。
Force Atlas 2：Force Atlas 2 是一种力导向布局的变形，比 force 收敛地更好，更紧凑。
Combo 力导向 ComboForce：ComboForce 是基于力导向的专用于带有 combo 的图的布局算法。通过自研改造经典力导向算法，将根据节点的 combo 信息，施加不同的力以达到同 combo 节点尽可能聚集，不同 combo 之间尽可能无重叠的布局。
Fruchterman：Fruchterman 布局是一种力导布局。算法原文： [Graph Drawing by Force-directed Placement](https://link.juejin.cn/?target=http%3A%2F%2Fwww.mathe2.uni-bayreuth.de%2Faxel%2Fpapers%2Freingold%3Agraph_drawing_by_force_directed_placement.pdf “http://www.mathe2.uni-bayreuth.de/axel/papers/reingold:graph_drawing_by_force_directed_placement.pdf”)
环形 Circula：Circular 布局将所有节点布局在一个圆环上，可以选择节点在圆环上的排列顺序。可以通过参数的配置扩展出环的分组布局、螺旋形布局等。原文链接： [A framework and algorithms for circular drawings of graphs](https://link.juejin.cn/?target=https%3A%2F%2Fwww.sciencedirect.com%2Fscience%2Farticle%2Fpii%2FS1570866705000031 “https://www.sciencedirect.com/science/article/pii/S1570866705000031”)。
辐射形 Radial：Radial 布局是将图布局成辐射状的布局方法。以一个 focusNode 为中心，其余节点按照与 focusNode 的度数关系排列在不同距离的环上。距离 focusNode 一度的节点布局在与其最近的第一个环上，距离 focusNode 二度的节点布局在第二个环上，以此类推。算法原文链接： [More Flexible Radial Layout](https://link.juejin.cn/?target=http%3A%2F%2Femis.ams.org%2Fjournals%2FJGAA%2Faccepted%2F2011%2FBrandesPich2011.15.1.pdf “http://emis.ams.org/journals/JGAA/accepted/2011/BrandesPich2011.15.1.pdf”)。
同心圆 Concentric：Concentric 布局为同心圆布局，用户可以指定节点某个属性为排序依据（默认为节点度数 degree），该属性值越高，则该节点布局后的位置中心。
高维数据降维 MDS：MDS 布局是高维数据降维算法布局，该算法全称 Multidimensional Scaling 。
格子 Grid：Grid 布局是将所有节点通过某种指定属性排序后，整齐地放置在网格上。
| – | D3 | ECharts | G6 |
| — | — | — | — |
| 渲染方式 | svg | svg、canvas | canvas |
| 可定制程度 | 高 | 较高 | 较高 |
| 布局算法 | 无 | 无 | 有 |
| 大数据渲染优化 | 无 | 有 | 有 |
* [antv.vision/zh](https://link.juejin.cn/?target=https%3A%2F%2Fantv.vision%2Fzh “https://antv.vision/zh”)
* [observablehq.com/@d3/gallery](https://link.juejin.cn/?target=https%3A%2F%2Fobservablehq.com%2F%40d3%2Fgallery “https://observablehq.com/@d3/gallery”)
* [echarts.apache.org/handbook/zh…](https://link.juejin.cn/?target=https%3A%2F%2Fecharts.apache.org%2Fhandbook%2Fzh%2Fbasics%2Frelease-note%2Fv5-feature%2F “https://echarts.apache.org/handbook/zh/basics/release-note/v5-feature/”)
* [graphin.antv.vision/graphin/lay…](https://link.juejin.cn/?target=https%3A%2F%2Fgraphin.antv.vision%2Fgraphin%2Flayout%2Fnetwork “https://graphin.antv.vision/graphin/layout/network”)
* [vleedesigntheory.github.io/tech/front/…](https://link.juejin.cn/?target=https%3A%2F%2Fvleedesigntheory.github.io%2Ftech%2Ffront%2Fgraph20210419.html%23%25E5%25B8%25B8%25E8%25A7%2581%25E7%25AE%2597%25E6%25B3%2595 “https://vleedesigntheory.github.io/tech/front/graph20210419.html#%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95”)