知识图谱项目是一个强视觉交互性的关系图可视化分析系统,很多模块都会涉及到对节点和关系的增删改查操作,常规的列表展示类数据通过表格展示,表单新增或编辑,而图谱类项目通常需要关系图(力导向图:又叫力学图、力导向布局图,是绘图的一种算法,关系图一般采用这种布局方式)去展示,节点和关系的新增编辑也需要前端去做一些复杂的交互设计。除此之外还有节点和关系的各种布局算法,大量数据展示的性能优化,节点动态展开时的局部布局渲染,画布的可扩展性,样式的自定义等等诸多技术难点。目前国内使用最多的两个已开源的前端可视化框架:阿里的AntV、百度的Echarts对于关系图的支持都比较弱,不能完全满足项目中的需求。
在之前的两个图谱demo项目中我一直是使用的D3.js这个前端最流行的可视化图库。D3.js也是比较强大的图库,但是它提供的API都是偏底层的,文档也不友好,比较难上手,实现一个简单的功能也需要大量的代码,编码效率并不是很高,各个版本之间兼容性也很差,并且使用SVG渲染画布在大量节点显示的时候有性能瓶颈。
直到我遇见了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 install cytoscape
bower install cytoscape
jspm install npm:cytoscape
Demo
官网引用了github很多的Demo,都是比较经典的使用的例子。