网络图库Cytoscape.js的使用（三）：扩展

使用panzoom组件

可以平移和缩放一个Cytoscape.js图的小部件

gitHub：cytoscape/cytoscape.js-panzoom: Panzoom extension for Cytoscape.js (github.com)

1. 安装

   npm install cytoscape-panzoom
   

2. 引入

   import panzoom from 'cytoscape-panzoom';
   cytoscape.use( panzoom );
   

   或

   var panzoom = require('cytoscape-panzoom');
   panzoom(cytoscape)
   

   或简写

   cytoscape.use( require('cytoscape-panzoom') );
   

   注：

   样式和所用图标也要引入

   import "cytoscape-panzoom/cytoscape.js-panzoom.css"
   import "cytoscape-panzoom/font-awesome-4.0.3/css/font-awesome.css"
   

3. 使用

   var cy = window.cy = cytoscape({
         
         
       //options here...
   )}
                                  
   cy.panzoom({
         
         
   	// options here...
   });