这是基于vue框架的网络图案例,只实现了一部分功能,要想深入了解参考:Cytoscape.js
1、安装cytoscape.js
npm : npm install cytoscape
npm : npm install cytoscape-panzoom
2、在main.js里面配置:
import cytoscape from 'cytoscape'
import panzoom from 'cytoscape-panzoom'
panzoom(cytoscape)
一、创建一个展示网络图的窗口,html代码。
// html页面
<div :id='this.id' :style="idBackground"></div>
// 网络图数据
data() {
return {
id:'netWorkId',
idBackground: {
backgroundColor: "white", height: "650px"},
filter:0.5, // edge数据展示的控制
clusterInfo:{
},
networkData:{
},
cy: {
},
}
}
二、数据的获取
1、假数据的格式
let NetWorkData = {
data:{
"clusterInfo":['1','2'],
"nodes":[{
"id": "1", "name": "TCGA-CN-6022-01", "cluster": "2" }, {
"id": "2", "name": "TCGA-CQ-5327-01", "cluster": "1" }],
"edges":[{
"id": "1_2", "source": "1", "target": "2", "edge_weight": "1" }, {
"id": "1_2", "source": "1", "target": "2", "edge_weight": "1" },]
}
}
2、数据的获取和赋值
// 初始化这个方法
show(){
this.networkData = {
nodes: NetWorkData.data.nodes, edges: NetWorkData.data.edges};
this.clusterInfo = NetWorkData.data.clusterInfo;
this.drawNetwork();
}
二、网络图创建的必要方法
drawNetwork(){
var elements = this.formatCoexpression