本文主要是介绍基于Web应用的网络数据可视化方案,这类可视化方案众多,本文精选了一些相对典型的方案,供各位大佬参考。有些链接可能无法访问,请自备梯子。篇幅有限,欢迎补充。
1. Echarts
Echarts有好几种类型的图标可以用来丛网络数据的可视化,主要类型如下:
这是力引导布局的例子,对于需要进行稀疏排列的场景可以考虑用这种。
和力引导布局图类似,这种类型的图适合展示大规模网络数据,并且很好的平衡网络规模和渲染性能。
这种图可以显示依赖关系,自动高亮邻近连接关系和显示节点权重。
环形布局,对于节点数较少的情况用这种比较合适,表现形式更加美观。
这种图属于树状图,适合用在具有非常明确的上下级分层,并且没有横向关联的网络数据类型。
这种图能够使用在具有地理位置的节点网络场景,但是数据量不能太大,对于大量数据,图形渲染和刷新将会非常卡顿。
对于3D展示需求,Echarts也提供了相应的解决方案:
对于和路网相关的网络数据,可以使用本例子,展现了Echarts对于处理大量路网信息的强大性能。
2. G6
G6相较于Echarts也具有非常丰富的展示类型,和网络相关的主要包括一下几种:
适用于非树嵌套结构的、可能存在环路的数据结构展示。
这是美国迁徙图边绑定的例子,这种类型的图体现了三个方面的信息:1、节点的方向,输入或者输出;2、节点规模,通过节点的大小体现;3、输入输出的比例,通过节点的饼状图可以直观看出。
这种类型的图展示了四个方面的信息:1、节点的成份构成;2、节点规模;3、节点间通信方向;4、节点间流量大小。
这种类型的图标能够看出一个主线、和每个节点下的分类信息,以及每个节点在各个分类的大致覆盖情况。
这种是交通网络图,能够体现地理位置、动态的路网流量动画,节点状态动画。
3. L7
类似Echarts的飞线图,体现了地理位置,节点动画,节点连接信息流动方向。
3D地理节点数据飞线,可以体现出节点位置、信息流动方向。
4. L7Plot
体现了节点的地理位置、节点状态动画、节点连线的信息流动方向动画。
5. F6
F6主要是针对移动端的可视化工具,和G6类似,但是考虑充分考虑了移动端对于GPU的不同需求。
6. AVA
7. D3
D3提供了非常底层的可视化API,给与开发者极大的自由度。这种高自由度的代价是,对于复杂图形的开发成本高。D3也作为很多可视化工具的基础库。
泰森多边形又叫冯洛诺伊图(Voronoi diagram),得名于Georgy Voronoi,是一组由连接两邻点线段的垂直平分线组成的连续多边形。一个泰森多边形内的任一点到构成该多边形的控制点的距离小于到其他多边形控制点的距离。
Stern-Brocot Tree是一种能将所有的最简分数都表示出来的结构
8. Keylines
9. Vis.js
10. Sigma.js
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ermPDOwE-1662366655879)(https://codesandbox.io/s/github/jacomyal/sigma.js/tree/main/examples/load-gexf-file)]](https://img-blog.csdnimg.cn/d18b5d5fad7b4b6ebb722a2cde097746.png"/>
11. Ogma
12. Ngraph
13. React-force-graph
是一个3D视图的力引导布局的库。
14. Cola.js
15. Cytoscape.js
这是一个用纯JS编写的图形库,带有针对核心Cytoscape.js库和所有第一方扩展的开放源代码许可(MIT)。它在生产中的商业项目和开源项目中使用,并且首先面向用户(面向前端应用程序用例和开发人员用例)设计。它包括从BFS到PageRank的图论算法。一个非常适合做知识图谱的前端可视化图库。
16. dagre-d3
17. ElGrapho
18. GoJS
19. Jointjs
20. JavaScript InfoVis Toolkit
21. jsPlumb
参考资料