网络分析可视化库Cytoscape.js

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

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

1、Cytoscape.js安装，可以使用script标签引入，也可以使用npm安装，import引入。
a、在html文件中用script标签引入Cytoscape.js文件

1	<script src="cytoscape.min.js"></script>

b、使用npm install cytoscape，然后在文件中import导入。这样就可以很好的和Vue结合一起使用了。

1	npm install cytoscape

1	import cytoscape from 'cytoscape';

2、最基本的用法，定义一个容器节点，并且设置宽高，cytoscape()传入参数初始化。

1	<div style="width: 300px;height: 300px;display: block;" ></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

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
}
});

在雷雪松看来，文档还是比较全的，Demo也很丰富，还有一些第三方的扩展。在我们使用cytoscape.js时，需要注意的就是Layout布局，Selectors选择器，Style样式，Event事件，Data数据操作，Animation动画这几部分。其中包含了基本的展示，事件的交互，数据的处理（动态添加数据，删除数据），基本能满足90%以上的需求。

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

“网络分析可视化库Cytoscape.js” 评论

新闻头条评论:
2019年8月12日下午11:29

文章不错非常喜欢

雷雪松的个人blog

雷雪松的博客，一个优秀的个人技术博客。

网络分析可视化库Cytoscape.js

“网络分析可视化库Cytoscape.js” 评论

发表回复