网络分析可视化库Cytoscape.js

WEB前端 JS插件 2019年8月12日

在Web开发中，图形是很多数据分析和展示必不可少的组件。今天主要讲的是图与网络分析可视化库Cytoscape.js。在图与网络分析中对象用节点表示，对象之间的关系用连线边表示。用点、边的集合构成图。图是网络分析的基础，来研究有节点和边所组成图形的数学理论和方法。下面雷雪松给大家介绍一下网络分析可视化库Cytoscape.js的用法。

1、Cytoscape.js安装，可以使用script标签引入，也可以使用npm安装，import引入。
a、在html文件中用script标签引入Cytoscape.js文件
[cc lang=”html” escaped=”true”]<script src=”cytoscape.min.js”></script>[/cc]
b、使用npm install cytoscape，然后在文件中import导入。这样就可以很好的和Vue结合一起使用了。
[cc lang=”javascript” escaped=”true”]npm install cytoscape[/cc]
[cc lang=”javascript” escaped=”true”]import cytoscape from ‘cytoscape’;[/cc]

2、最基本的用法，定义一个容器节点，并且设置宽高，cytoscape()传入参数初始化。
[cc lang=”html” escaped=”true”]<div style=”width: 300px;height: 300px;display: block;” ></div>[/cc]
[cc lang=”javascript” escaped=”true”]var cy = cytoscape({
container: document.getElementById(‘cy’), //获取定义的节点容器
elements: [ //定义节点和连线
{
data: { id: ‘a’ }
},
{
data: { id: ‘b’ }
},
{
data: { id: ‘ab’, source: ‘a’, target: ‘b’ }
}
],
style: [ //图形样式
{
selector: ‘node’,//节点样式
style: {
‘background-color’: ‘#666’,
‘label’: ‘data(id)’//显示id的值
}
},

{
selector: ‘edge’,//连线样式
style: {
‘width’: 3,
‘line-color’: ‘#ccc’,
‘target-arrow-color’: ‘#ccc’,
‘target-arrow-shape’: ‘triangle’//箭头样式
}
}
],
layout: { //布局
name: ‘grid’,
rows: 1
}
});[/cc]
在雷雪松看来，文档还是比较全的，Demo也很丰富，还有一些第三方的扩展。在我们使用cytoscape.js时，需要注意的就是Layout布局，Selectors选择器，Style样式，Event事件，Data数据操作，Animation动画这几部分。其中包含了基本的展示，事件的交互，数据的处理（动态添加数据，删除数据），基本能满足90%以上的需求。

来源：网络分析可视化库Cytoscape.js