-

网络分析可视化库Cytoscape.js

WEB前端

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

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

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

    文章不错非常喜欢

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注