1、安装cytoscape.jsnpm:npminstallcytoscapenpm:npminstallcytoscape-panzoom
2、在main.js里面配置：importcytoscapefrom'cytoscape'importpanzoomfrom'cytoscape-panzoom'panzoom(cytoscape)
一、创建一个展示网络图的窗口，html代码。
1//html页面2
二、数据的获取
1、假数据的格式
1letNetWorkData={2data:{3"clusterInfo":['1','2'],4"nodes":[{"id":"1","name":"TCGA-CN-6022-01","cluster":"2"},{"id":"2","name":"TCGA-CQ-5327-01","cluster":"1"}],5"edges":[{"id":"1_2","source":"1","target":"2","edge_weight":"1"},{"id":"1_2","source":"1","target":"2","edge_weight":"1"},]6}7}2、数据的获取和赋值
//初始化这个方法show(){this.networkData={nodes:NetWorkData.data.nodes,edges:NetWorkData.data.edges};this.clusterInfo=NetWorkData.data.clusterInfo;this.drawNetwork();}
三、网络图创建的必要方法
以上是完整的网络图实例，下面介绍下关于网络图自己用过的其他方法。
//获取视口的范围，这是模型坐标中的一个边界框，它允许您知道在视口中可见的模型位置。1、this.cy.extent();
//node的点击事件2、this.cy.nodes().on(‘click’,e=>{});
//重构网络图页面的方法,得到一个新的布局，它可以用来在图中对节点进行算法定位3、this.cy.layout({name:cose,//数据的排列算法boundingBox:{x1:0,y1:0,w:550,h:650},//限制视图的展示范围。}).run();
//对edge数据的处理4、this.cy.edges()；
//对点的样式的处理方法5、this.cy.nodes(’.’+this.classes).style({‘background-color’:red;});//获取node样式this.cy.nodes(’.’+this.classes).style();
//线的样式的处理6、this.cy.edges().style({//样式})//获取edge样式this.cy.edges().style();