前端关系图谱插件_前端拓扑图插件选型对⽐
前端拓扑图插件选型对⽐
前端⽣成拓扑图、关系图、流程图的 JavaScript 插件有很多，各种编辑器五法⼋门。
本⽂对⽐各插件的优缺点，为选型提供⼀些参考。
前⾔
⽬标：
实现⼀个⽹络拓扑图的可视化界⾯
可通过托拉拽的⽅式对图进⾏编辑(节点、连线、属性)
能跟后台数据进⾏动态绑定
具有告警功能
其它⼀些细节
为什么选择第三⽅插件：主要还是省事，避免重复造轮⼦。如果要⾃⼰⼿写实现⼀个，开发时间周期较长；作为学习的话，可以投⼊这⽅⾯的精⼒。
既然决定⽤插件了，肯定要有个选型的过程。下⾯先列举下我对市⾯上主要⼏种插件的选型对⽐。
免费插件
1. jTopo
简介：jTopo(Javascript Topology library)是⼀款完全基于 HTML5 Canvas 的关系、拓扑图形化界⾯开发⼯具包。
背景：个⼈、国产
官⽹：www.jtopo/
⽰例：github/wenyuan/jtopo_topology
优点免费
轻量
⽆明显性能问题
功能丰富，⽀持各种⾃定义操作
国产，⽂档简单，上⼿容易
缺点未开放源代码，如需做功能增强，对着混淆后的 js 代码做修改⽐较费时间
2015 年就停更了，作者在 2019 年表⽰正在准备新版本，当前进度未知
有⼀些 bug(⽐如⾃动布局)
不是采⽤模块化编程的，在现代化框架(⽐如 Vue.js)中使⽤⽐较⿇烦(但可以实现)
建议⼩项⽬中可以使⽤，⼤型项⽬不建议
新⼿使⽤，可以提⾼⾃⼰的 JavaScript 功底
2. Vis.js
简介：Vis.js 基于 HTML5 Canvas 开发的动态可视化库。该库被设计为易于使⽤，处理⼤量的动态数据，并⽀持对数据的操作和交互。
背景：Almende B.V、国外
官⽹：/
⽰例：visjs.github.io/vis-network/examples/
优点开源免费
⽆明显性能问题
功能丰富，⽀持各种⾃定义操作
⽀持⾃动布局(防碰撞算法)
缺点需要投⼊⼀些时间通读⽂档，英⽂不好的⼈会⽐较费⼒
⾃带的连线样式中没有折线的样式
建议先搞清楚 vis 中的数据结构 DataSet，再⼊⼿使⽤
耐⼼看⽂档，其实⽂档写的挺好的
3. AntV G6
简介：G6 是⼀个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能⼒。背景：蚂蚁⾦服 AntV、国产
官⽹：antv.vision/zh
⽰例：github/wenyuan/cceditor
优点开源免费
上⼿简单，可扩展性强
功能丰富，⽀持各种⾃定义操作
由蚂蚁⾦服 AntV 团队开发，从维护性和⽣态圈⾓度考虑相对有保障
⽀持⾃动布局(早期借助 d3-force 实现，后期已经被内部⽀持)
缺点有性能问题(> 200 个⽹元单位)
⽂档易⽤性⼀般(早期托管在语雀时，缺少全⽂搜索功能)
有时候⽂档和版本会脱节(可以理解，问题不⼤)
建议⼤⼚团队开发维护，后期有保障，⼤⼩项⽬都可以使⽤
可以学习⾥⾯的⼀些编程思想和技巧
4. jsPlumb
优点开源免费
功能丰富，⽀持各种⾃定义操作
缺点demo 过于简单
多条线时可能会叠在⼀起
从 demo 来看感受不到可以从哪开始连线
建议感兴趣的可以尝试下
5. JointJs
简介：JointJS 是⼀个开源前端框架，⽀持绘制各种各样的流程图、⼯作流图等。Rappid 是 Joint 的商业版，提供了⼀些更强的插件。
背景：公司、国外
官⽹：www.jointjs/
优点连线可设置项较为全⾯
原⽣⽀持拖拽和缩放
线可以⼿动添加转折点
有根据已添加点和线⾃动布局功能
扩展相对容易
缺点对于线的交互⽅式有点反直觉
demo 上有 bug，修改了信息不刷新
demo 的流程图不是以像素为基本单位，拖拽会感觉卡顿
纯英⽂⽂档，有的⼈会觉得读起来费⼒
建议感兴趣的可以尝试下
6. D3
特点：⼤都靠⾃⼰实现
7. ECharts
优点上⼿⾮常简单
缺点扩展性弱(毕竟不是专做图编辑器的，关系图只是 ECharts 中的⼀项)
建议可以⽤在定制化的需求中，不需要拖拉拽等功能
8. Le5le-topology
简介：Le5le-topology 是⼀个可视化在线绘图⼯具，使⽤ Canvas + Typescript。⽀持 topology, UML、微服务架构、动态流量、SCADA 场景等。
背景：个⼈、国产
官⽹：topology.le5le/
仓库：github/le5le-com/topology
优点开源免费
⽀持的图很多
技术⽐较新(Typescript)
开箱即⽤，⼏乎不⽤额外开发成本
论坛前端模板缺点个⼈开发的，2019 年起作者在各⼤⽹站推⼴，持续维护性和⽣态圈尚不成熟
建议再观察两年，看作者是否在持续稳定发展，或者是否会形成开发团队
付费插件
1. hightopo优点省事
⽀持 3D 图
缺点贵
建议有预算的团队可以考虑
2. Qunee优点省事
有⼀定颜值
缺点贵
对普通需求来说，有些功能显得臃肿
不利于⼆开，需要事件扩展时如果原⽣不⽀持可能会⾮常⿇烦(不过既然花钱了，应该可以联系⼚家定制)
建议有预算的团队可以考虑
开发历程
选型阶段主要是编写⼀些 Demo 级别的代码，最终采⽤了三种插件来实现较为完整的功能，分别是 Vis.js，jTopo，和 AntV G6。这三种插件都较好地实现了我需要的功能，但也有⼀些细微的坑。
第⼀版是 Vis.js 阶段，花了挺多时间研究⽂档，功能是实现了，最终考虑到扩展性和颜值，才有了第⼆版。
第⼆版是 jTopo 阶段，当时⽤了很短的时间实现了功能，不过由于官⽅⽂档缺失⼀些内容，以及对功能有⼀些额外的需求(⽐如节点上我想绑定对象类型的属性)，对着混淆后的“源码”⼀路摸爬滚打，增删改查，很费⼼⼒。针对这个插件的完整 Demo 以及补充⽂档我开源了⼀个 GitHub repo，感兴趣的可以查看：jtopo_topology
第三版是 AntV G6 阶段，由蚂蚁⾦服团队开发的。第⼀次了解到它是在开源中国上看到了⼀篇推⽂，⼀下⼦就⼼动了。当时 G6 处于 1.x 和 2.x 两⼤版本交替期间，⽂档是托管在语雀上的，最⼤的缺点是⽂档的滞后，加上语雀那个时候还不够完善，阅读体验不是很好，查询起来⽐较费时。到了 G6 2.x 阶段，对⽂档⽐较熟悉了，所以⽤起来相对得⼼应⼿，这个时候最⼤的瓶颈就是性能问题，所以⼀直停留在Demo 阶段。
在今年过年时候，我看到 AntV G6 发布了 3.x 版本，做出了 breaking change，那段时间升级后，基本上是⼀边 bug ⼀边提 issue(这⾥要感谢 G6 团队，对 issue 的响应和处理⾮常快 )。这个版本可以说是相对成熟了，不管是功能还是性能，都得到了增强。后来我也开源了⼀个 GitHub repo，感兴趣的可以查看：cceditor
经过了三次迭代，⽬前使⽤的插件是 AntV G6，在⼀些不需要即时编辑的场景下，我会采⽤ Echarts 的关系图组件，也相对容易上⼿。
感受
这两年在各⼤论坛和交流，发现图可视化和图编辑器的需求越来越多，也踊跃出很多插件开发者的开源项⽬，譬如 Le5le-topology，就是⼀款由个⼈(⼩团队)领衔开发的产品化编辑器，之所以说是产品化，因为它集成了很多解决⽅案，可以说是开箱即⽤了。相信在可视化这个领域，会不断涌现出优秀的作品，对开发者⽽⾔，⾃然少不了可以借鉴和学习的地⽅。
最后
市⾯上有很多同类的插件，以上只是我调研的⼀部分，在选型对⽐中，肯定也会有疏漏，如果有其他想法，欢迎在评论区留⾔！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。