cytoscape.js基礎篇

cytoscape.js

Cytoscape.js是一個用JS編寫的開源圖庫. 您可以使用Cytoscape.js進行圖形分析和可視化展示.

Cytoscape.js允許您輕鬆顯示操作豐富的交互式圖形. 因爲Cytoscape.js允許用戶與圖形交互, 並且允許客戶端在用戶事件中掛在鉤子, 所以Cytoscape.js可以輕鬆集成到您的應用程序中, 特別是因爲Cytoscape.js支持桌面瀏覽器, 如Chrome, 和移動瀏覽器, 如iPad. Cytoscape.js包括您期望開箱即用的所有手勢, 包括捏合縮放, 框選擇, 平移等等.

包引用

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

版本信息

• 3.5
  • 3.5.4
  • 3.5.3
  • 3.5.2
  • 3.5.1
  • 3.5.0
• 3.4
  • …

Citation

To cite Cytoscape.js in a paper, please cite the Oxford Bioinformatics issue:

Cytoscape.js: a graph theory library for visualisation and analysis

Franz M, Lopes CT, Huck G, Dong Y, Sumer O, Bader GD

Bioinformatics (2016) 32 (2): 309-311 first published online September 28, 2015 doi:10.1093/bioinformatics/btv557 (PDF)

PubMed abstract

Funding

Funding for Cytoscape.js and Cytoscape is provided by NRNB (U.S. National Institutes of Health, National Center for Research Resources grant numbers P41 RR031228 and GM103504) and by NIH grants 2R01GM070743 and 1U41HG006623. The following organizations help develop Cytoscape:

ISB | UCSD | MSKCC | Pasteur | Agilent | UCSF | Unilever | Toronto | NCIBI | NRNB

基礎篇

cytoscape.js變量描述

速記	內容
cy	核心
eles	一個或多個元素(節點或邊)的集合
ele	單個元素的集合(節點或邊)
nodes	一個或多個節點的集合
node	單個節點的集合
edges	一個或多個邊的集合
edge	單邊的集合
layout	佈局
ani	動畫

注: 默認情況下,函數會返回對象自身,以允許鏈接調用,如obj.fn1().fn2().fn3(). 除非文檔說明,否則全部遵循此方式.

位置

節點的位置是指其節點的中心點位置.
對於位置有一個重要的區別: 位置可以是模型位置或渲染位置.
模型位置: 是存儲在元素模型中的位置. 儘管變焦和平移發生了變化, 但元素的模型位置仍保持不變.
渲染位置: 是相對於容器位置的. 例如, 渲染位置{ x: 100, y: 100 }是指在左上角起向右100個像素向下100個像素的位置.
當縮放和平移更改時, 元素的渲染位置會自然更改.

Elements JSON

let cy = cytoscape({
  // initial viewport state:
  zoom: 1, // 圖表的初始縮放級別.可以設置options.minZoom和options.maxZoom設置縮放級別的限制.
  pan: {x: 0, y: 0}, // 圖表的初始平移位置.
  // interaction options:
  minZoom: 1e-50, // 圖表縮放級別的最小界限.視口的縮放比例不能小於此縮放級別.
  maxZoom: 1e50, // 圖表縮放級別的最大界限.視口的縮放比例不能大於此縮放級別.
  zoomingEnabled: true, // 是否通過用戶事件和編程方式啓用縮放圖形.
  userZoomingEnabled: true, // 是否允許用戶事件(例如鼠標滾輪,捏合縮放)縮放圖形.對此縮放的編程更改不受此選項的影響.
  panningEnabled: true, // 是否通過用戶事件和編程方式啓用平移圖形.
  userPanningEnabled: true, // 是否允許用戶事件(例如拖動圖形背景)平移圖形.平移的程序化更改不受此選項的影響.
  boxSelectionEnabled: false, // 是否啓用了框選擇(即拖動框疊加,並將其釋放爲選擇).如果啓用,則用戶必須點擊以平移圖表.
  selectionType: 'additive', // 一個字符串，指示用戶輸入的選擇行爲.對於'additive',用戶進行的新選擇將添加到當前所選元素的集合中.對於'single',用戶做出的新選擇成爲當前所選元素的整個集合.
  touchTapThreshold: 8, // 非負整數,分別表示用戶在輕擊手勢期間可以在觸摸設備和桌面設備上移動的最大允許距離.這使得用戶更容易點擊.
                        // 這些值具有合理的默認值,因此建議不要更改這些選項,除非您有充分的理由這樣做.大值幾乎肯定會產生不良後果。
  desktopTapThreshold: 4, // 非負整數,分別表示用戶在輕擊手勢期間可以在觸摸設備和桌面設備上移動的最大允許距離.這使得用戶更容易點擊.
                          // 這些值具有合理的默認值,因此建議不要更改這些選項,除非您有充分的理由這樣做.大值幾乎肯定會產生不良後果。
  autolock: false, // 默認情況下是否應鎖定節點(根本不可拖動,如果true覆蓋單個節點狀態).
  autoungrabify: false, // 默認情況下節點是否不允許被拾取(用戶不可抓取,如果true覆蓋單個節點狀態).
  autounselectify: false, // 默認情況下節點是否允許被選擇(不可變選擇狀態,如果true覆蓋單個元素狀態).
  // rendering options:
  headless: false, // true:空運行,不顯示不需要容器容納.false:顯示需要容器容納.
  styleEnabled: true, // 一個布爾值,指示是否應用樣式.
  hideEdgesOnViewport: true, // 渲染提示,設置爲true在渲染窗口時,不渲染邊.例如,移動某個頂點時或縮放時,邊信息會被臨時隱藏,移動結束後,邊信息會被執行一次渲染.由於性能增強,此選項現在基本上沒有實際意義.
  hideLabelsOnViewport: true, // 渲染提示,當設置爲true使渲染器在平移和縮放期間使用紋理而不是繪製元素時,使大圖更具響應性.由於性能增強,此選項現在基本上沒有實際意義.
  textureOnViewport: true, // 渲染提示,當設置爲true使渲染器在平移和縮放期間使用紋理而不是繪製元素時,使大圖更具響應性.由於性能增強,此選項現在基本上沒有實際意義.
  motionBlur: true, // 渲染提示,設置爲true使渲染器使用運動模糊效果使幀之間的過渡看起來更平滑.這可以增加大圖的感知性能.由於性能增強,此選項現在基本上沒有實際意義.
  motionBlurOpacity: 0.2, // 當motionBlur:true,此值控制運動模糊幀的不透明度.值越高,運動模糊效果越明顯.由於性能增強,此選項現在基本上沒有實際意義.
  wheelSensitivity: 1, // 縮放時更改滾輪靈敏度.這是一個乘法修飾符.因此,0到1之間的值會降低靈敏度(變焦較慢),而大於1的值會增加靈敏度(變焦更快).
  pixelRatio: 'auto', // 使用手動設置值覆蓋屏幕像素比率(1.0建議,如果已設置).這可以通過減少需要渲染的有效區域來提高高密度顯示器的性能,
                      // 儘管在最近的瀏覽器版本中這是不太必要的.如果要使用硬件的實際像素比,可以設置pixelRatio: 'auto'(默認).

  // DOM容器,決定內容展示的位置,方式一(原生):document.getElementById('xx'),方式二(jQuery):$('#xx')
  container: document.getElementById('map_1556155828169'),
  // 節點內容,所有的頂點及關係信息的載體
  // 方式一:flat array of nodes and edges,頂點和節點平坦排列
  elements: [
    {data: {id: 'n2'}, position: {x: 400, y: 200},}, // node n2
    {data: {id: 'n3'}, position: {x: 123, y: 234}}, // node n3
    {data: {id: 'nparent'}}, // node nparent, 複合節點
    { // edge e1
      group: 'edges', /* 'nodes' for a node, 'edges' for an edge,指定了'source'和'target'屬性,可省略此屬性. */
      data: {
        id: 'e1',
        /* 因爲指定了'source'和'target',所以推斷爲邊緣. `eles.move()`可以有效地更改'source'和'target'的內容. */
        source: 'n1', /* 起點 */ target: 'n2'  /* 終點 */
      }
    }
  ],
  // or
  // 方式二: nodes保存所有節點, edges保存所有關係.
  elements: {
    nodes: [{data: {id: 'n2'}, position: {x: 400, y: 200},},{data: {id: 'n3'}, position: {x: 123, y: 234}},{data: {id: 'nparent'}},],
    edges: [
      { // edge e1
        group: 'edges', /* 'nodes' for a node, 'edges' for an edge,指定了'source'和'target'屬性,可省略此屬性. */
        data: {
          id: 'e1',
          /* 因爲指定了'source'和'target',所以推斷爲邊緣. `eles.move()`可以有效地更改'source'和'target'的內容. */
          source: 'n1', /* 起點 */ target: 'n2'  /* 終點 */
        }
      }
    ]
  },
  // 用於設置圖形樣式的樣式表.爲方便起見,也可以將此選項指定爲解析爲樣式表的promise.
  style: [
    {selector: 'node', style: {'label': 'data(id)'}}
  ],
  // 一個指定佈局選項的普通對象.
  layout: {name: 'preset'},
});

節點屬性說明

let ele =
  { // 一個節點
    group: 'nodes', // 'nodes' for a node, 'edges' for an edge
    data: { // 元素數據
      id: 'n1', // 每個元素的唯一標識字段id(字符串或數字),在未定義的情況下自動分配.
      parent: 'nparent', // 表示複合節點的父級id,未定義代表無父結點.'eles.move()'可以有效地更改'parent'.
      xxx: 'xxx', // 其他用戶數據
    },
    scratch: { // 暫存數據(通常是臨時數據或非序列化數據).
      _foo: 'bar' // 其他用戶數據
    },
    position: {x: 100, y: 100}, // 節點位置
    renderedPosition: {x: 200, y: 200}, // 節點呈現位置,優先級高於position
    selected: false, // 節點被選擇
    selectable: true, // 節點可以被選擇
    locked: false, // 節點是否被鎖定,鎖定後,位置不可變
    grabbable: true, // 用戶是否可以抓取和移動節點
    classes: ['foo', 'bar'] // 類樣式,可以是['foo', 'bar'],也可以是'foo bar'
  };

關係屬性說明

let edge =  { // edge e1
  group: 'edges', /* 'nodes' for a node, 'edges' for an edge,指定了'source'和'target'屬性,可省略此屬性. */
  data: {
    id: 'e1',
    /* 因爲指定了'source'和'target',所以推斷爲邊緣. `eles.move()`可以有效地更改'source'和'target'的內容. */
    source: 'n1', /* 起點 */ target: 'n2',  /* 終點 */
    xxx: 'xxx', // 其他用戶數據
  },
  scratch: { // 暫存數據(通常是臨時數據或非序列化數據).
    _foo: 'bar' // 其他用戶數據
  },
  selected: false, // 關係被選擇
  selectable: true, // 關係可以被選擇
  classes: ['foo', 'bar'] // 類樣式,可以是['foo', 'bar'],也可以是'foo bar'
}

初始化

安裝

要通過npm安裝Cytoscape.js: npm install cytoscape

引用

import cytoscape from ‘cytoscape’;
let cytoscape = require(‘cytoscape’);

創建實例

let cy = cytoscape({
  container: document.getElementById('map_1556155828169')
});

初始化元素

• 參考: Elements JSON.

  elements: [
    {data: {id: 'n2'}, position: {x: 400, y: 200},}, // node n2
    {data: {id: 'n3'}, position: {x: 123, y: 234}}, // node n3
    {data: {id: 'nparent'}}, // node nparent, 複合節點
    { // edge e1
      group: 'edges', /* 'nodes' for a node, 'edges' for an edge,指定了'source'和'target'屬性,可省略此屬性. */
      data: {
        id: 'e1',
        /* 因爲指定了'source'和'target',所以推斷爲邊緣. `eles.move()`可以有效地更改'source'和'target'的內容. */
        source: 'n1', /* 起點 */ target: 'n2'  /* 終點 */
      }
    }
  ],
  // or
  // 方式二: nodes保存所有節點, edges保存所有關係.
  elements: {
    nodes: [{data: {id: 'n2'}, position: {x: 400, y: 200},},{data: {id: 'n3'}, position: {x: 123, y: 234}},{data: {id: 'nparent'}},],
    edges: [
      { // edge e1
        group: 'edges', /* 'nodes' for a node, 'edges' for an edge,指定了'source'和'target'屬性,可省略此屬性. */
        data: {
          id: 'e1',
          /* 因爲指定了'source'和'target',所以推斷爲邊緣. `eles.move()`可以有效地更改'source'和'target'的內容. */
          source: 'n1', /* 起點 */ target: 'n2'  /* 終點 */
        }
      }
    ]
  },

基本圖形操作

添加元素

cy.add（eleObj) // 將指定的元素添加到圖形中. eleObj 指定元素的普通對象.
cy.add（eleObjs) // 將指定的元素添加到圖形中. eleObjs 由普通對象指定的元素數組.
cy.add（eles) // 將指定的元素添加到圖形中. eles 元素的集合.
// 如果使用普通元素對象, 則必須遵循初始化時使用的相同格式.

// 通過普通對象添加節點
cy.add({group: 'nodes', data: { weight: 75 }, position: { x: 200, y: 200 }});

// 添加節點和關係
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' } }
]);

刪除元素

cy.remove(eles) // 刪除指定的元素. eles 要刪除的元素集合.
cy.remove(selector) // 刪除與指定選擇器匹配的圖形中的元素. selector 匹配此選擇器的元素將被刪除.
// 方式〇:
cy.remove( cy.getElementById('n7') ); // 刪除id='n7'的元素
// 方式一:
let collection = cy.elements('node[weight > 50]'); // 刪除節點中,weight屬性大於50的元素
cy.remove( collection );
// 方式二:
cy.remove('node[weight > 100]'); // 刪除節點中,weight屬性大於100的元素
cy.remove('node[id = "n7"]'); // 刪除節點中,id屬性等於n7的元素

創建新空集合

cy.collection() // 獲得一個空集合.
// 保留已單擊的節點集合
var collection = cy.collection();
cy.nodes().on('click', (e) => {
  var clickedNode = e.target;
  collection = collection.union(clickedNode);
});

獲取指定元素

cy.getElementById(id) // id 要獲取的元素的id.

cy.getElementById('n7');

元素篩選

cy.$( selector ) // 獲取圖表中與指定選擇器匹配的元素
cy.elements( selector ) // 獲取圖表中與指定選擇器匹配的元素
cy.nodes( selector ) // 獲取圖表中與指定選擇器匹配的節點元素
cy.edges( selector ) // 獲取圖表中與指定選擇器匹配的關係元素
cy.filter( selector ) // 獲取圖表中與指定選擇器匹配的元素
cy.filter( function(ele, i, eles) ) // 獲取圖形中與指定過濾器函數匹配的元素
    ele 當前元素.
    i 計數器, 用於迭代圖中元素.
    eles 當前元素集合.

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

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

// 獲取權重大於50的所有節點和邊緣
cy.elements('[weight > 50]');
cy.filter('[weight > 50]');

// 使用過濾功能獲取權重大於50的節點
cy.filter(function(element, i){
  return element.isNode() && element.data('weight') > 50;
});

元素批量更新

cy.batch( function() ) // 一個回調函數, 您可以在其中對元素進行批量更新
cy.startBatch() // 手動開始批處理(對異步情況很有用)
cy.endBatch() // 手動結束批處理(對異步情況很有用)

// 當修改元素時, 每個修改都可以觸發樣式計算和重繪,具體取決於重繪的時間.以下修改導致兩個樣式計算和至少一個繪製.
cy.getElementById('j').data('weight', '70').addClass('funny').removeClass('serious');
// 這對於少數幾個元素的少數操作來說不是問題, 但對於許多元素的許多操作,最終會出現冗餘樣式計算和冗餘重繪.

// 此功能對於一次對元素進行許多更改很有用,如下:
// 同步風格:
cy.batch(function(){
  cy.$('#j')
    .data('weight', '70')
    .addClass('funny')
    .removeClass('serious')
  ;
});
// 異步風格:
cy.startBatch();
cy.$('#j')
  .data('weight', '70')
  .addClass('funny')
  .removeClass('serious')
;
cy.endBatch();

將實例附加到指定的容器

cy.mount( container ) // container: 一個HTML DOM元素容器,使用該容器渲染內容.

在容器中刪除實例

cy.unmount() // 從當前容器中刪除實例.

銷燬實例

cy.destroy()

設置或獲取暫存數據

完善中

圖事件

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() );
});

promiseOn事件

別名: cy.pon()
說明: 用此方式綁定的事件,僅在此類事件首次觸發時觸發,且只執行一次.
cy.promiseOn( events [, selector] )
    events 以空格分隔的事件名稱列表.
    selector [可選]用於指定處理程序運行的元素的選擇器.
// 例如: 
cy.pon('tap').then(function( event ){
  console.log('tap promise fulfilled');
});

one事件-一次性事件

說明: 用此方式綁定的事件,只運行一次處理程序.
cy.one( events [, selector], function(event) ) // 一次性事件
    events 以空格分隔的事件名稱列表.
    selector [可選]用於指定處理程序運行的元素的選擇器.
    function(event) 發生其中一個指定事件時調用的處理函數.
        event 事件對象.

cy.one('tap', 'node', function(){
  console.log('tap!');
});
// 當$無效時,可使用cy.getElementById()
cy.$('node').eq(0).trigger('tap'); // tap!
cy.$('node').eq(1).trigger('tap'); // nothing b/c already tapped

removeListener事件

別名: cy.off(), cy.unbind(), cy.unlisten()
說明: 用此方式綁定的事件,僅在此類事件首次觸發時觸發,且只執行一次.
cy.removeListener( events [, selector] [, handler] )
    events 以空格分隔的事件名稱列表.
    selector [可選]用於指定處理程序運行的元素的選擇器.
    handler  [可選]對要刪除的處理函數的引用.

// 對於所有處理程序: 
cy.on('tap', function(){ /* ... */ });
// remove all tap listener handlers, including the one above
cy.removeListener('tap');

// 對於特定的處理程序:
let handler = function(){
  console.log('called handler');
};
cy.on('tap', handler);
let otherHandler = function(){
  console.log('called other handler');
};
cy.on('tap', otherHandler);
cy.removeListener('tap', handler);

emit事件-發出一個或多個事件

別名:
cy.emit( events [, extraParams] ) // 發出一個或多個事件
    events 以空格分隔的事件名稱列表.
    extraParams [可選]要傳遞給處理程序的其他參數數組.
// 例子
cy.on('tap', function(evt, f, b){
  console.log('tap', f, b);
});
cy.emit('tap', ['foo', 'bar']);

ready事件-圖表準備就緒後立即運行

cy.ready( function(event) ) // 圖表準備就緒後立即運行
    function(event) 圖表準備就緒後立即運行回調函數.
        event ready事件對象.

佈局

佈局-創建並返回佈局對象

別名: cy.createLayout(), cy.makeLayout()
注意: 必須調用layout.run()它才能影響圖形.
cy.layout(options) // 創建並返回佈局對象
    options 佈局選項

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

樣式操作

cy.style() // 獲取當前樣式對象.
cy.style( stylesheet ) // 指定新樣式表以替換現有樣式表
    stylesheet 任一個cytoscape.stylesheet()對象,一個字符串的樣式表,或者樣式表JSON(接受相同的格式options.style在初始化).

持續更新中…