一. Cytoscape.js簡介與安裝

1.1 Cytoscape.js是什么？

cytoscape.js是一個做網頁可視化的常用工具 。cytoscape.js包含圖論模型和可選的渲染器，用于顯示交互式圖形。該庫旨在使程序員和科學家盡可能輕松地在他們的應用程序中使用圖形理論，無論是用于Node.js應用程序中的服務器端分析還是用于豐富的用戶界面。

1.2 Cytoscape.js安裝及HelloWorld

1.2.1 使用包管理工具進行安裝

• npm : npm install cytoscape
• bower : bower install cytoscape
• jspm : jspm install npm:cytoscape

1.2.2 使用Script標簽直接引入

<script src="cytoscape.min.js"></script>

1.2.3 HelloWorld

var cy = cytoscape({container: document.getElementById('cy') // container to render in }); 也可以給container傳遞jQuery實例 var cy = cytoscape({container: $('#cy') });

1.2.4 常用參數

{// very commonly used optionscontainer: undefined,elements: [ /* ... */ ],style: [ /* ... */ ],layout: { name: 'grid' /* , ... */ },// initial viewport state:zoom: 1,pan: { x: 0, y: 0 },// interaction options:minZoom: 1e-50,maxZoom: 1e50,zoomingEnabled: true,userZoomingEnabled: true,panningEnabled: true,userPanningEnabled: true,boxSelectionEnabled: true,selectionType: 'single',touchTapThreshold: 8,desktopTapThreshold: 4,autolock: false,autoungrabify: false,autounselectify: false,// rendering options:headless: false,styleEnabled: true,hideEdgesOnViewport: false,textureOnViewport: false,motionBlur: false,motionBlurOpacity: 0.2,wheelSensitivity: 1,pixelRatio: 'auto' }

二. 圖形操作

1. 添加元素

cy.add()

1.1 添加單個節點

cy.add({group: 'nodes',data: { weight: 75 },position: { x: 200, y: 200 } });

1.2 添加節點和邊

var eles = cy.add([{ group: 'nodes', data: { id: 'n0' }, position: { x: 100, y: 100 } },{ group: 'nodes', data: { id: 'n1' }, position: { x: 200, y: 200 } },{ group: 'edges', data: { id: 'e0', source: 'n0', target: 'n1' } } ]);

2. 刪除元素

cy.remove()

2.1 移除單個元素

var j = cy.$('#j'); cy.remove( j );

2.2 移除集合中的元素

var collection = cy.elements('node[weight > 50]'); cy.remove( collection );

2.3 使用選擇器來進行元素刪除

var collection = cy.elements('node[weight > 50]'); cy.remove( collection );

3. 使用集合

cy.collection() — 獲取一個空集合

例如使用集合保存被點擊過的節點

var collection = cy.collection(); cy.nodes().on('click', function(e){var clickedNode = e.target;collection = collection.union(clickedNode); });

4. 使用getElementById()來根據id獲取指定元素

cy.getElementById( id ) 參數為元素的id值

cy.getElementById('j'); 或者使用下列方式 cy.getElementById('j');

5. 元素匹配

5.1 cy.$( selector )

cy.$("#a") // 獲取id值為a的元素

5.2 cy.elements( selector )

cy.elements('[weight > 50]'); // 獲取權重大于50的元素

5.3 cy.nodes( selector )

cy.nodes('[weight > 50]'); // 獲取權重大于50的節點

5.4 cy.edges( selector )

cy.edges('[source = "j"]'); // 獲取源點為id為j的節點的邊

5.5 cy.filter( selector )

cy.filter('[weight > 50]');

5.6 cy.filter( ( ele, i, eles ) => {} )

使用回調函數的方式實現上面用選擇器匹配的效果

cy.filter(function(element, i){return element.isNode() && element.data('weight') > 50; });

6. 批量操作

這允許在不觸發多個樣式計算或多個元素重繪的情況下操作元素。此函數對于同時對元素進行許多更改非常有用。當指定的回調函數完成時，只有需要它的元素才會更新它們的樣式，而呈現器最多只會重新繪制一次。

包含下列三個API:

• cy.batch(() => { // do something })
• cy.startBatch() — 手動開始批量操作,主要用于異步操作
• cy.endBatch() – 手動結束批量操作，主要用于異步操作

6.1 不使用批處理涉及到對元素的多個樣式更新

cy.$('#j').data('weight', '70') // 樣式更新.addClass('funny') // 樣式更新.removeClass('serious') // 樣式更新// 至少一次，至多3次重繪，這取決于上述操作執行的速度

這對于少數元素的樣式更新沒有問題，但是如果對于大批量的元素進行上述操作，會造成很多冗余的重繪，導致性能問題，下面用批處理來解決上述問題

6.2 批處理中對元素的多樣式更新

cy.batch(function(){cy.$('#j').data('weight', '70').addClass('funny').removeClass('serious'); });

6.2 如果采取手動控制批處理的開始與結束

cy.startBatch();cy.$('#j').data('weight', '70').addClass('funny').removeClass('serious') ;cy.endBatch();

7. 元素的掛載與卸載

cy.mount( container ) container參數為掛載的dom元素

cy.mount( container ) 移除container dom元素上掛載的cytoscape實例

8. 元素的銷毀

銷毀cytoscape實例

cy.destroy()

可以使用cy.cy.destroy()來判斷cytoscape實例是否已經被銷毀

三. 數據綁定

3.1 圖數據綁定及獲取

• cy.data() — 獲取整個圖的數據對象

• cy.data( name ) — 獲取指定字段名的數據

• cy.data( name, value ) — 綁定鍵為name,值為value的數據

• cy.data( obj ) — 通過對象更新途中的多個字段值數據

3.2 圖數據刪除

• cy.removeData() — 刪除圖的所有可變數據
• cy.removeData(names) — 刪除指定字段名的數據, names參數為要刪除的字段的空格分隔列表

3.3 圖數據暫存

3.3.1 cy.scratch()

設置或獲取暫存數據，其中可以存儲臨時數據或非json數據。應用程序級別的暫存數據應該使用帶下劃線前綴的名稱空間，如’_foo’

• cy.scratch() — 獲取圖所有名稱空間下的暫存數據

• cy.scratch( namespace ) — 獲取指定名稱空間下的暫存數據

• cy.scratch( namespace, value ) — 添加名稱空間namespace，并設置暫存值為value

3.3.2 cy.removeScratch()

移除圖的暫存數據

cy.removeScratch( namespace ) 移除指定命名空間下的暫存數據, 不添加命名空間參數則會清空所有圖相關的暫存數據

四. 事件監聽

4.1 事件普通綁定方式cy.on()

別名： cy.bind(),cy.listen(),cy.addListener()

事件的綁定方式如下:

cy.on( events [, selector], function(event) )

• events

  空格分隔的時間名列表

• selector

  可選參數, 如果不傳遞，事件將被綁定在整個圖實例上

  選擇器，匹配到的元素將被綁定事件

• function(event)

  事件監聽的回調函數

  • event

    監聽到的事件對象

一個實例

cy.on('tap', 'node', function(evt){var node = evt.target;console.log( 'tapped ' + node.id() ); });

下列代碼沒有指定選擇器，則事件被綁定到了整個圖實例上

cy.on('tap', function(event){// target holds a reference to the originator// of the event (core or element)var evtTarget = event.target;if( evtTarget === cy ){console.log('tap on background');} else {console.log('tap on some element');} });

4.2 可以獲取Promise對象的事件綁定方式cy.promiseOn()

別名: pon

事件觸發后將獲取到一個成功態的的Promise對象
cy.promiseOn( events [, selector] )

cy.pon('tap').then(function( event ){console.log('tap promise fulfilled'); });

4.3 只生效一次的事件監聽cy.one()

綁定的事件只響應一次

cy.one('tap', 'node', function(){console.log('tap!'); });cy.$('node').eq(0).trigger('tap'); // 觸發事件，事件不再響應 cy.$('node').eq(1).trigger('tap'); // 事件不再響應

4.4 事件監聽的移除

4.4.1 cy.removeListener()

cy.removeListener( events [, selector] [, handler] )

• events

  空格分隔的事件名列表

• selector

  選擇器，匹配到的元素將進行事件移除，可選參數，如果不指定，則移除對象為圖實例

• handler
  可選參數，可指定移除指定的處理器函數對象關聯的事件，不指定則移除所有指定類型的事件處理器監聽

如下：
實例1: 不指定具體的事件處理器

cy.on('tap', function(){ /* ... */ });// remove all tap listener handlers, including the one above cy.removeListener('tap');

實例2: 針對具體的事件處理器進行事件綁定和解綁

var handler = function(){console.log('called handler'); }; cy.on('tap', handler);var otherHandler = function(){console.log('called other handler'); }; cy.on('tap', otherHandler);// just remove handler cy.removeListener('tap', handler);

4.4.2 移除圖實例所有事件監聽

cy.removeAllListeners()

4.4.3 事件的主動觸發

cy.emit()， 別名cy.trigger()

cy.emit( events [, extraParams] )

cy.on('tap', function(evt, f, b){console.log('tap', f, b); });cy.emit('tap', ['foo', 'bar']);

4.4.4 圖準備就緒事件的監聽

cy.ready()

一旦圖形準備好(即初始數據加載和初始布局完成)，就運行一個回調。

cy.ready(function(event){// do something }

五. 視口操作

5.1 使用cy.container()獲取圖實例的dom容器

cy.container()

5.2 居中操作cy.center()

• cy.center() — 以圖中所有元素為中心進行居中。
• cy.center( eles ) — 以指定元素為中心進行居中

var j = cy.$('#j'); cy.center( j );

5.3 自適應

cy.fit() — 自動調整圖的平移距離和縮放級別以達到正好容納元素的效果

• cy.fit() — 調整視口以容納圖中的所有元素
• cy.fit( [eles], [ padding]) — 調整視口以容納指定元素，并可以指定padding

cy.fit( cy.$('#j, #e') );

5.3 重置圖的默認縮放級別和平移位置

cy.reset()

setTimeout( function(){cy.pan({ x: 50, y: -100 }); }, 1000 );setTimeout( function(){cy.zoom( 2 ); }, 2000 );setTimeout( function(){cy.reset(); }, 3000 );

5.4 獲取或設置圖形的平移位置。

• cy.pan() — 獲取當前平移位置
• cy.pan( renderedPosition ) — eg: { x: 100, y: 200 }

cy.pan({x: 100,y: 100 });console.log( cy.pan() );

5.5 對于當前位置相對地平移圖形

cy.panBy( renderedPosition )

如將圖形向右平移100像素:

cy.panBy({x: 100,y: 0 });

5.6 設置是否可以支持平移操作

• cy.panningEnabled() — 獲取是否當前圖實例支持進行平移操作
• cy.panningEnabled( bool ) — 設置當前圖實例是否支持進行平移操作
• cy.userPanningEnabled() — 獲取是否啟用了用戶平移(用戶的拖拽操作)。
• cy.userPanningEnabled( bool ) — 設置是否啟用用戶平移

cy.panningEnabled( bool ) cy.userPanningEnabled( true );

5.7 指定縮放級別

5.7.1 cy.zoom()

• cy.zoom() 獲取縮放級別

• cy.zoom( level ) 設置縮放級別

• cy.zoom( options ) options The options for zooming.

  • level

    縮放級別

  • position

    要縮放的位置

  • renderedPosition

    縮放到的位置

  position和renderedPosition不要同時指定

eg:

cy.zoom({level: 1.5,position: cy.getElementById('a').position() });

• cy.minZoom() — 獲取最小縮放級別

• cy.maxZoom() – 設置最小縮放級別

• cy.viewport( zoom, pan ) — 通過一個函數來設置縮放級別和平移位置

  cy.viewport({zoom: 2,pan: { x: 100, y: 100 } });

5.7.2 cy.zoomingEnabled()

• cy.zoomingEnabled() — 獲取是否支持縮放

• cy.zoomingEnabled(bool) — 設置是否支持縮放

• userZoomingEnabled() — 獲取是否支持用戶使用鼠標等交互方式進行縮放

• userZoomingEnabled( bool ) — 設置是否支持用戶使用鼠標等交互方式進行縮放

5.8 boxSelectionEnabled

獲取或設置是否啟用了框選擇。如果同時啟用平移，用戶必須按住shift、control、alt或command中的一個來啟動框選擇

• cy.boxSelectionEnabled() — 獲取是否支持擴選
• cy.boxSelectionEnabled( bool ) — 設置是否支持擴選

cy.boxSelectionEnabled( true );

5.9 cy.selectionType()

設置或設置選擇類型。“single”選擇類型是默認的，點擊一個元素將選擇該元素并取消選擇前面的元素。

還可以指定為追加類型"additive", 可逐次選中多個元素

• cy.selectionType()
• cy.selectionType( type ) “single”(default)或者"additive"

5.10 獲取視口寬度和高度

• cy.width()
• cy.height()
• cy.extend()
  獲取viewport的范圍，模型坐標中的一個邊界框讓您知道在viewport中哪些模型位置是可見的。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-0B18sP3a-1604913881342)(/Users/liwei/Library/Application Support/typora-user-images/image-20200418201051078.png)]

5.11 cy.autolock()

獲取或設置節點是否被自動鎖定(即，如果為真，則無論節點的狀態如何都被鎖定)

• cy.autolock() — 獲取圖節點是否自動鎖定
• cy.autolock( bool ) — 設置圖節點是否自動鎖定

cy.autolock( bool )

5.12 設置節點是否自動取消抓取autoungrabify

• cy.autoungrabify() — 獲取是否自動取消抓取被啟用
• cy.autoungrabify( bool ) — 設置是否啟動自動取消抓取

5.13 獲取或設置節點是否自動取消選擇

• cy.autounselectify()
• cy.autounselectify( bool )

5.14 強制渲染器重新計算視口邊界

cy.resize()

別名: cy.invalidateDimensions()

六. 動畫Animation

6.1 動畫執行cy.animate()

• cy.animated() 判斷是否有動畫在進行

• cy.animate( options ) 操縱視口執行動畫options An object containing the details of the animation.

  • zoom

    一個縮放級別(數字)或一個縮放配置對象。

  • • level

      要使用的縮放級別。

    • position

      縮放發生的位置。這將自動修改pan，使指定的模型位置在縮放期間保持在viewport區段中的相同位置。

    • renderedPosition

      關于縮放發生的渲染位置，作為使用模型位置的替代。這將自動修改pan，使模型位置(與動畫開始時呈現的位置相對應)在縮放期間保持在viewport區段中的相同位置。

  • pan

    圖形將被移動到的平移位置。

  • panBy

    圖形將被移動到的相對平移位置。

  • fit
    一個包含圖自動調整以適應對應元素的參數對象

  • • eles

      視口將進行調整以容納對應元素

    • padding

      Padding to use with the fitting (default 0).

  • center

    一個對象，該對象包含將從其中對圖形進行動畫處理的居中選項。

  • • eles

      將視口置于中心的elements或選擇器

  • duration

    動畫執行時間

  • queue

    一個布爾值，指示是否對動畫進行排隊(默認為“true”)。核心上排隊的動畫按順序運行，直到隊列為空。

  • easing

    指定 transition- time- function 類型，以形成動畫的進度曲線。

  • complete
    動畫執行完成時候執行的回調函數

  • step

    動畫步驟調用回調。

  eg:

• 操縱pan和zoom
cy.animate({pan: { x: 100, y: 100 },zoom: 2 }, {duration: 1000 });
• 視口自適應容納元素
cy.animate({fit: {eles: j,padding: 20} }, {duration: 1000 });

6.2 動畫獲取cy.animation()

獲取視口的動畫。

cy.animation( options )

options參數同上, 該函數用來獲取指定配置信息的動畫

6.3 為動畫添加延遲cy.delay()

cy.delay( duration, complete )

cy.animate({fit: { eles: '#j' }}).delay(1000) // 1s.animate({fit: { eles: '#e' }}) ;

6.4 獲取視口的延遲動畫cy.delayAnimation()

cy.delayAnimation( duration ) — duration為延遲時間

6.5 停止動畫

stop(clearQueue, jumpToEnd)
clearQueue是一個布爾值(默認為false)，表示動畫隊列是否應該被清空。
jumpToEnd一個布爾值(默認為false)，指示當前運行的動畫是否應該跳轉到它們的末端，而不是中途停止。

cy.animate({fit: { eles: '#j' } }, { duration: 2000 });// stop in the middle setTimeout(function(){cy.stop(); }, 1000);

6.6 清空動畫隊列cy.clearQueue()

刪除viewport中所有排隊的動畫。

七.布局 Layout

cy.layout()

別名: cy.createLayout(), cy.makeLayout()

獲取一個新的布局，它可以用于用算法在圖中定位節點。

cy.layout( options )

• options 布局參數, options.name必須指定

cy.layout()會返回一個布局實例，可以基于這個實例進行其他操作

var layout = cy.layout({name: 'random' });layout.run();

八. 樣式Style

cy.style()

• cy.style() — 獲取當前圖的樣式對象
• cy.style( stylesheet ) — 為圖指定新的樣式對象
  stylesheet 參數可以是一個 cytoscape.stylesheet() 對象, 一個樣式對象的字符串, 也可以指定為JSON格式的字符串(格式參考options.style`)

8.1 樣式字符串

cytoscape({container: document.getElementById('cy'),// ...style: 'node { background-color: green; }'// , ... });

8.2 普通JSON格式

cytoscape({container: document.getElementById('cy'),// ...style: [{selector: 'node',style: {'background-color': 'red'}}// , ...]// , ... });

8.3 cytoscape.stylesheet()`用法

cytoscape({container: document.getElementById('cy'),// ...style: cytoscape.stylesheet().selector('node').style({'background-color': 'blue'})// ...// , ... });

8.4 根據元素data進行樣式繪制

cytoscape({container: document.getElementById('cy'),// ...style: cytoscape.stylesheet().selector('node').style({'background-color': function( ele ){ return ele.data('bg') }// which works the same as// 'background-color': 'data(bg)'})// ...// , ... });

8.5 設置一個全新的樣式

cy.style().clear() //清除默認樣式而應用一個全新的樣式// 定義節點樣式.selector('node').style('background-color', 'magenta')// 定義邊樣式.selector('edge').style({'width': 3,'line-color': 'yellow'})// ....update() // 顯示聲明樣式更新代碼的結束，通知cytoscape更新元素樣式 ;

8.6 從樣式字符串創建style

cy.style().fromString('node { background-color: blue; }').update() // update the elements in the graph with the new style ;

8.7 獲取當前樣式的JSON對象

var styleJson = cy.style().json(); var serializedJson = JSON.stringify( styleJson );

九. 圖的導出

9.1 將當前圖形視圖導出為PNG圖像

cy.png( options )

• options

  導出參數設置

  • output

    輸出應該是“base64uri”(默認)、“base64”、“blob”還是“blob-promise”(返回解析為blob的Promise)。

  • bg

    圖像的背景顏色(默認為白色)。

  • full

    是導出當前的viewport視圖(“false”，默認)還是導出整個圖(“true”)。

  • scale

    此值指定一個正數，該正數縮放生成的圖像的大小。

  • maxWidth

    指定與“maxHeight”組合的自動比例，以便生成的圖像寬度不超過“maxWidth”。

  • maxHeight

    指定與“maxWidth”組合的自動比例，以便生成的圖像不高于“maxHeight”。

eg:

var png64 = cy.png();// put the png data in an img tag document.querySelector('#png-eg').setAttribute('src', png64);

9.2 導出圖為jpg

cy.jpg()

cy.jpg( options )

• options

  導出參數對象

  • output

    輸出應該是“base64uri”(默認)、“base64”、“blob”還是“blob-promise”(返回解析為blob的Promise)。

  • bg

    圖像的背景顏色(默認為白色)。

  • full

    是導出當前的viewport視圖(“false”，默認)還是導出整個圖(“true”)。

  • scale

    此值指定一個正數，該正數縮放生成的圖像的大小。

  • maxWidth

    指定與“maxHeight”組合的自動比例，以便生成的圖像寬度不超過“maxWidth”。

  • maxHeight

    指定與“maxWidth”組合的自動比例，以便生成的圖像不高于“maxHeight”。

  • quality

    指定從’ 0 ‘(低質量，低文件大小)到’ 1 '(高質量，高文件大小)的圖像質量。如果沒有設置，則使用瀏覽器的默認質量值。

  var jpg64 = cy.jpg();// put the png data in an img tag document.querySelector('#jpg-eg').setAttribute('src', jpg64);

9.3 導出JSON

cy.json()

以初始化時使用的相同JSON格式導入或導出圖數據。

cy.json( flatEles )

• flatEles

  resulant JSON是否應該將元素包含為平面數組(’ true ‘)或兩個按組鍵控的數組(’ false '，默認)。

cy.json( cyJson )

將圖形作為JSON導入，只更新指定的字段。

• cyJson

  具有與應該更改的狀態對應的字段的對象。

eg:

cy.json({zoom: 2 });

總結

以上是生活随笔為你收集整理的前端追梦人Cytoscape.js教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。