知识图谱项目前端可视化图论库——Cytoscape.js简介

前言

知识图谱项目是一个强视觉交互性的关系图可视化分析系统，很多模块都会涉及到对节点和关系的增删改查操作，常规的列表展示类数据通过表格展示，表单新增或编辑，而图谱类项目通常需要关系图（力导向图：又叫力学图、力导向布局图，是绘图的一种算法，关系图一般采用这种布局方式）去展示，节点和关系的新增编辑也需要前端去做一些复杂的交互设计。除此之外还有节点和关系的各种布局算法，大量数据展示的性能优化，节点动态展开时的局部布局渲染，画布的可扩展性，样式的自定义等等诸多技术难点。目前国内使用最多的两个已开源的前端可视化框架：阿里的AntV、百度的Echarts对于关系图的支持都比较弱，不能完全满足项目中的需求。

在之前的两个图谱demo项目中我一直是使用的D3.js这个前端最流行的可视化图库。D3.js也是比较强大的图库，但是它提供的API都是偏底层的，文档也不友好，比较难上手，实现一个简单的功能也需要大量的代码，编码效率并不是很高，各个版本之间兼容性也很差，并且使用SVG渲染画布在大量节点显示的时候有性能瓶颈。

直到我遇见了Cytoscape.js——一个非常适合做知识图谱的前端可视化图库。

先看看cytoscape.js是什么

cytoscape是一个网络图的可视化工具，大量的生物分子/基因领域的公司用它来做可视化分析。由于它的通用性，慢慢的也被其他领域的人用来做网络的可视化和分析。cytoscape分为两种，一种叫做cytoscape desktop，是一个桌面软件，可以把数据导入然后生成可视化的网络图进行分析；另一种叫做cytoscape.js，是一个javascript库，主要给开发人员使用，来在网页上生成可视化的网络图。我们要用的是后者。

官方介绍

Cytoscape.js是一个用原生JS编写的开源图论（又名网络）库。你可以使用Cytoscape.js进行图形分析和可视化。

Cytoscape.js允许你轻松显示和操作丰富的交互式图形。由于Cytoscape.js允许用户与图形进行交互，并且库允许客户端挂接到用户事件，因此Cytoscape.js可以轻松集成到你的应用程序中，尤其是因为Cytoscape.js支持桌面浏览器（例如Chrome）和移动浏览器，就像在iPad上一样。Cytoscape.js包含了开箱即用的所有手势，包括捏缩放，框选择，平移等。

Cytoscape.js还考虑了图分析：该库包含图论中的许多有用功能。你可以在Node.js上无头使用Cytoscape.js在终端或Web服务器上进行图形分析。

Cytoscape.js支持许多不同的图论用例。它支持有向图，无向图，混合图，循环，多图，复合图（一种超图），等等。

兼容所有现代浏览器、具有ES5和canvas支持的旧版浏览器。

安装

• npm : npm install cytoscape
• bower : bower install cytoscape
• jspm : jspm install npm:cytoscape

Demo

官网引用了github很多的Demo，都是比较经典的使用的例子。