Cytoscape.js 网络图

这是基于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