一、业务背景
近期，我司在做相关云服务的拓扑架构感知，因此项目中最大也最复杂的功能就是拓扑图的实现，拓扑图和普通的图有一些不同的地方。
- 拓扑图不同于其他简单图的实现，拓扑图是现实网络及节点的真实写照，因此会有很巨量的节点，因此性能是一个很大的问题需要被关注。也就是如何保证不卡顿，流畅。
- 拓扑图往往存在不同的层级或维度，因此在实现过程中，会有不同维度的拓扑图的穿插出现。
- 拓扑图是图的数据结构，但是某个节点的数据项中可能还是树的数据结构，且会有不同交集的节点存在连线问题。因此数据结构是很复杂的，在进行数据结构设计时要考虑充分。
二、实现方案对比
1、 免费方案
| 方案 | 简介 | 官网 / 示例 | 优点 | 缺点 | 建议 |
|---|---|---|---|---|---|
| jTopo | Javascript Topology library是一款完全基于 HTML5 Canvas 的关系、拓扑图形化界面开发工具包。（国内） | https://github.com/wenyuan/jtopo_topology |
1、 免费 2、 轻量 3、 无明显性能问题 4、 功能丰富，支持各种自定义操作 5、 国产，文档简单，上手容易 |
1、 未开放源代码，如需做功能增强，对着混淆后的 js 代码做修改比较费时间 2、 2015 年就停更了，作者在 2019 年表示正在准备新版本，当前进度未知 3、 有一些 bug（比如自动布局） 4、 不是采用模块化编程的，在现代化框架（比如 Vue.js）中使用比较麻烦（但可以实现） |
1、 小项目中可以使用，大型项目不建议 2、 新手利好 |
| Vis.js | 基于 HTML5 Canvas开发的动态可视化库。该库被设计为易于使用，处理大量的动态数据，并支持对数据的操作和交互。（ 国外） |
1、https://visjs.org/ 2、https://visjs.github.io/vis-network/examples/ |
1、 开源免费 2、 无明显性能问题 3、 功能丰富，支持各种自定义操作 4、 支持自动布局（防碰撞算法） |
1、 需要投入一些时间通读文档，英文不好的人会比较费力 2、 自带的连线样式中没有折线的样式 |
1、 先搞清楚 vis 中的数据结构 DataSet，再入手使用 2、 耐心看文档 |
| AntV G6 | G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。 蚂蚁金服 AntV、（国产） |
1、https://antv.vision/zh 2、https://github.com/wenyuan/cceditor |
1、开源免费 2、上手简单，可扩展性强 3、功能丰富，支持各种自定义操作 4、由蚂蚁金服 AntV 团队开发，从维护性和生态圈角度考虑相对有保障 5、支持自动布局（早期借助 d3-force 实现，后期已经被内部支持） |
1、有性能问题（&g200 个网元单位） 2、文档易用性一般（早期托管在语雀时，缺少全文搜索功能） 3、有时候文档和版本会脱节（可以理解，问题不大） |
1、大厂团队开发维护，后期有保障，大小项目都可以使用 2、可以学习里面的一些编程思想和技巧 |
| jsPlumb | jsPlumb 是一个比较强大的绘图组件，它提供了一种方法，主要用于连接网页上的元素。（个人，国外） |
1、https://jsplumbtoolkit.com/ 2、https://wdd.js.org/jsplumb-chinese-tutorial |
1、开源免费 2、功能丰富，支持各种自定义操作 |
1、 demo 过于简单 2、多条线时可能会叠在一起 3、从 demo 来看感受不到可以从哪开始连线 |
1、感兴趣的可以尝试下 |
| JointJs | >JointJS 是一个开源前端框架，支持绘制各种各样的流程图、工作流图等。Rappid 是 Joint 的商业版，提供了一些更强的插件。（个人，国外） | https://www.jointjs.com/ |
1、连线可设置项较为全面 2、原生支持拖拽和缩放 3、线可以手动添加转折点 4、有根据已添加点和线自动布局功能 5、扩展相对容易 |
1、对于线的交互方式有点反直觉 2、demo 上有 bug，修改了信息不刷新 3、demo 的流程图不是以像素为基本单位，拖拽会感觉卡顿 4、纯英文文档，有的人会觉得读起来费力 |
1、感兴趣的可以尝试下 |
| D3.js | 这个框架发布于2011年。从当时的眼光来看，利用Data Join（Thinking with Joins）来完成『DOM结点』与『数据』之间的更新好像还是挺先进的。 | https://www.d3js.org.cn/ |
1、API灵活 2、定制性高 |
1、D3始终操作的是真实DOM，尽管每次只更新数据变动所对应的DOM，代价也是挺大的，会触发浏览器重绘和重排，在大量数据面前，性能可能不如canvas，尤其是有交互效果时，大量svg元素进入动画队列，页面会卡顿的非常厉害。
2、上手难度大 3、学习成本高 |
1、似乎不是很适应现代前端框架 |
| ECharts | ECharts 关系图(国内，百度) | https://echarts.apache.org/zh/index.html | 1、上手非常简单 | 1、扩展性弱（不是专做图编辑器的，关系图只是 ECharts 中的一项） | 1、可以用在定制化的需求中，不需要拖拉拽等功能 |
| Le5le-topology | Le5le-topology 是一个可视化在线绘图工具，使用 Canvas + Typescript。支持 topology, UML、微服务架构、动态流量、SCADA 场景等。（ 个人、国产） |
1、http://topology.le5le.com/ 2、https://github.com/le5le-com/topology |
1、开源免费 2、支持的图很多 3、技术比较新（Typescript） 4、开箱即用，几乎不用额外开发成本 |
1、个人开发的，2019 年起作者在各大网站推广，持续维护性和生态圈尚不成熟 | 1、观察一下，看作者是否在持续稳定发展，或者是否会形成开发团队 |
2、付费方案
| 方案 | 简介 | 官网 / 示例 | 优点 | 缺点 | 建议 |
|---|---|---|---|---|---|
| hightopo | 提供完整的基于 HTML5 图形界面组件库。使用 HT for Web 您可以轻松构建现代化的，跨桌面和移动终端的企业应用，无需担忧跨平台兼容性，及触屏手势交互等棘手问题。 | https://www.hightopo.com/ |
1、 省事 2、 支持 3D 图 |
1、 贵 | 1、 有预算的团队可以考虑 |
| Qunee | 使用HTML5 Canvas技术，绘制清新、流畅的网络图，可用于社交网络图、拓扑图、流程图、地图等需求， JS组件封装，藏繁琐于简洁，轻松构建优雅的互联网应用与企业应用，让数据的在线可视化变得容易 | http://www.qunee.com/ |
1、 省事 2、 有一定颜值 |
1、 贵 2、 对普通需求来说，有些功能显得臃肿 3、 不利于二开，需要事件扩展时如果原生不支持可能会非常麻烦（不过既然花钱了，应该可以联系厂家定制） |
1、 有预算的团队可以考虑 |
你好，请问网络拓扑最终选择的哪个框架？？
@dddd : 您好，最终我这边选择的是AntV G6 考虑有比较多的demo和较活跃的社区