文章转自鲸鱼啊：https://www.jingyua.com

最近项目上又个需求，需要用到拓扑工具，原来没有接触过这块内容，就去网上找了一些开源js拓扑工具，这里我做了一下总结，分享给大家。

 

1.jtopo 拓扑图形化界面开发工具包

 

jTopo（Javascript Topology library)是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。

jTopo关注于数据的图形展示，它是面向开发人员的，需要进行二次开发。

使用jTopo很简单，可以快速创建一些关系图、拓扑等相关图形化的展示。只要您的数据之间存在有关联关系，都可以使用jTopo来进行人性化、图形化的展示。

jTopo的目标：

• 简单好用
• 灵活扩展
• 轻松开发出类似Visio、在线脑图、UML建模等类似工具
• 为大数据可视化提供解决方案
•  

jTopo特点

• 完全基于HTML5 Canvas开发，始终站在开发者的角度设计，API平易近人、几乎简单到了极致。
• 不依赖任何其他库、执行仅需一个Canvas，不污染你的页面、Dom结构和代码命名空间。
• 功能异常强大、灵活，可扩展性极强（为扩展而生），包装一下，就是一款很专业的图形化软件。
• 体积小，压缩后仅几十KB。
• 性能十分优异，可流畅地展示大量数据(经过专业优化过甚至可以展示几十万、百万级别的数据)
• 免费

不足：目前文档不够详细，主要通过Demo来熟悉。

官网地址： http://www.jtopo.com/index.html

2.hightopo（ HT for Web ）

 

提供完整的基于HTML5图形界面组件库。使用HT for Web您可以轻松构建现代化的，跨桌面和移动终端的企业应用，无需担忧跨平台兼容性，及触屏手势交互等棘手问题。

可用于快速创建和部署，高度可定制化，并具有强大交互功能的拓扑图形及表盘图表等应用。HT for Web非常适用于实时监控系统的界面呈现，广泛应用于电信网络拓扑和设备管理，以及电力、燃气等工业自动化(HMI/SCADA)领域。

HT for Web提供了一套独特的WebGL层抽象，将Model–View–Presenter (MVP)的设计模型延伸应用到了3D图形领域。使用HT for Web您可更关注于业务逻辑功能，不必将精力投入复杂3D渲染和数学等非业务核心的技术细节。

hightopo特点

• 易用：易学易用，数小时的学习即可上手，几天的使用即可精通
• 轻量：包含通用组件、2D拓扑和3D引擎的核心包仅有300k左右
• 高性能：所有组件均可承载万以上的数据量，并能保持操作流畅
• 跨平台：可运行于桌面平台和移动终端所有支持的HTML5浏览器
•  

不足：不免费、但是支持试用，API庞大

官网地址： http://www.hightopo.com/cn-index.html

3.jsPlumb 外国友人开发的拓扑工具

 

jsPlumb提供了构建应用程序所需的一切功能：平移/缩放，小地图窗口小部件，自动布局，数据绑定等等。 利用HTML5和CSS3，与移动设备无缝集成

jsPlumb特点：

• 支持Angular（7，6，5，4，2）、vue2.0、react
• 强大的UI定制
• 自动布局
• 提供多种窗口小工具
•  

不足：没有中文文档、开源意味着出现复杂BUG不能及时处理

官网地址： https://jsplumbtoolkit.com/

GitHub链接 ： https://github.com/jsplumb/jsplumb

4. vis.js 开源动态可视化拓扑工具库

 

基于浏览器的动态可视化工具库。vis.js旨在易于使用，处理大量动态数据，以及实现对数据的操作和交互。vis.js由组件DataSet，Timeline，Network，Graph2d和Graph3d组成。

vis.js特点：

• 动态，自动组织，可自定义的网络视图。
• 可自定义交互时间轴
• 动态数据更新
• 交互式动画，3D图形库，开箱即用
•  

不足：文档不全

官网地址： https://visjs.org/

GitHub链接: https://github.com/almende/vis