開始

本節將向您介紹開始使用Cytoscape.js所需的基本步驟。

包括Cytoscape.js

如果您使用的是HTML環境，則將Cytoscape.js包含在<script>標籤，例如：

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

若要使用CDN中的Cytoscape.js，請使用CDNJS。請不要從文檔中鏈接到Cytoscape.js的副本-它們只是演示用的。

注意，Cytoscape.js在初始化時使用HTML DOM元素容器的維度進行佈局和呈現。因此，將CSS樣式表放在<head>在任何與Cytoscape.js相關的代碼之前。否則，尺寸可能會被錯誤地報告，導致不想要的行爲。

樣式表可能包括這樣的內容(假設DOM元素帶有ID)cy用作容器)：

#cy {
width: 300px;
height: 300px;
display: block;
}

要通過NPM安裝Cytoscape.js：

npm install cytoscape

要在像Node.js這樣的CommonJS環境中使用Cytoscape.js：

var cytoscape = require('cytoscape');

要在AMD/Require.js中使用Cytoscape.js：

require(['cytoscape'], function(cytoscape){
// ...
});

要通過Bower安裝Cytoscape.js：

bower install cytoscape

要通過流星/大氣安裝Cytoscape.js：

npm install cytoscape

js支持帶有ES5或更高版本的環境，因爲它是由Babel轉換的，並且只使用標準庫的基本特性。特徵檢測用於提高性能的可選特性。然而，未來版本的Cytoscape.js可能需要一個更新版本的標準庫。你可能想用babel-polyfill或core-js如果您希望在將來支持舊瀏覽器。

初始化

js的實例對應於一個圖。您可以如下所示創建一個實例：

var cy = cytoscape({
container: document.getElementById('cy') // container to render in
});

可以將jQuery實例作爲container爲方便起見：

var cy = cytoscape({
container: $('#cy')
});

如果在Node.js中運行Cytoscape.js或以其他方式無頭運行它，則不會指定container選擇。在Node.js這樣的隱式無頭環境中，實例自動無頭。若要顯式運行無頭實例(例如在瀏覽器中)，可以指定options.headless如true.

指定基本選項

爲了可視化，container, elements, style，和layout通常應設定下列備選方案：

var cy = cytoscape({
container: document.getElementById('cy'), // container to render in
elements: [ // list of graph elements to start with
{ // node a
data: { id: 'a' }
},
{ // node b
data: { id: 'b' }
},
{ // edge ab
data: { id: 'ab', source: 'a', target: 'b' }
}
],
style: [ // the stylesheet for the graph
{
selector: 'node',
style: {
'background-color': '#666',
'label': 'data(id)'
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle'
}
}
],
layout: {
name: 'grid',
rows: 1
}
});

下一步

現在，您有了一個具有基本選項的核心(圖)實例，請查看核心API。它是您進入Cytoscape.js中所有特性的切入點。

如果您有關於Cytoscape.js的代碼問題，請隨時訪問把你的問題發到Stackoverlow.

岩心

核心對象是圖形的接口。它是您進入Cytoscape.js的入口點：庫的所有功能都是通過這個對象訪問的。

初始化

可以按以下方式創建一個圖形：

var cy = cytoscape({ /* options */ });

您可以在沒有任何選項的情況下初始化內核。如果您想使用Cytosscape作爲可視化，那麼container需要DOM元素，例如：

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

請注意，爲了保證自定義字體的使用，必須在初始化Cytosscape之前加載所討論的字體。

下面的部分將更詳細地介紹這些選項。

初始化選項

一個Cytoscape.js實例可以在初始化時設置許多選項。下面列出了它們的默認值。

注意，一切都是可選的。默認情況下，您將得到一個帶有默認樣式表的空圖。爲了方便起見，瀏覽器之外的環境(例如Node.js)自動設置爲無頭環境。

var cy = cytoscape({
// very commonly used options
container: 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: false,
selectionType: 'single',
touchTapThreshold: 8,
desktopTapThreshold: 4,
autolock: false,
autoungrabify: false,
autounselectify: false,
// rendering options:
headless: false,
styleEnabled: true,
hideEdgesOnViewport: false,
hideLabelsOnViewport: false,
textureOnViewport: false,
motionBlur: false,
motionBlurOpacity: 0.2,
wheelSensitivity: 1,
pixelRatio: 'auto'
});

非常常用的選項

container一個HTML DOM元素，其中應該呈現圖形。如果Cytoscape.js是無頭運行的，則這是未指定的。容器被認爲是一個空的div；可視化擁有div。

elements*一系列元素指定爲普通對象。爲了方便起見，可以將此選項指定爲解析爲JSON元素的承諾。

style*樣式表用來畫圖表的。爲了方便起見，也可以將此選項指定爲解析到樣式表的承諾。

layout指定佈局選項的普通對象。初始運行的佈局由name場。請參閱佈局文件它支持的選項。如果要在元素JSON中自己指定節點位置，可以使用preset佈局-默認情況下，它不設置任何位置，將節點保留在當前位置(例如，在options.elements在初始化時)。

初始視口狀態

zoom*圖形的初始縮放級別。確保禁用viewport操作選項，如fit，使其在應用佈局時不會被重寫。你可以options.minZoom和options.maxZoom若要設置縮放級別上的限制，請執行以下操作。

pan*圖形的初始搖攝位置。確保禁用viewport操作選項，如fit，使其在應用佈局時不會被重寫。

交互選項

minZoom：圖的縮放級別上的最小界。視口不能比此縮放級別小。

maxZoom：圖的縮放級別上的最大界限。視點不能比此縮放級別大。

zoomingEnabled：是否通過用戶事件和編程方式啓用了縮放圖形。

userZoomingEnabled：是否允許用戶事件(例如鼠標輪、按下縮放)縮放圖形.縮放的編程更改不受此選項的影響。

panningEnabled：是否通過用戶事件和編程方式啓用了圖的搖攝。

userPanningEnabled：是否允許用戶事件(例如拖動圖形背景)對圖形進行平移。對PAN的方案更改不受此選項的影響。

boxSelectionEnabled是否啓用了框選擇(即將一個框覆蓋在周圍，並將其釋放到SELECT)。如果啓用，用戶必須按住以平移圖形。

selectionType*一個字符串，指示用戶輸入中的選擇行爲。爲'additive'，用戶所作的新選擇將添加到當前選定元素的集合中。爲'single'，用戶所作的新選擇將成爲當前選定元素的全部集合(即先前的元素未被選中)。

touchTapThreshold & desktopTapThreshold：一個非負整數，指示用戶在觸摸設備和桌面設備上分別在點擊手勢期間移動的最大允許距離。這使得用戶更容易使用。這些值具有正常的默認值，因此建議不要更改這些選項，除非您有充分的理由這樣做。更大的價值幾乎肯定會產生不良後果。

autoungrabify默認情況下，節點是否應該是不可抓取的(用戶不能抓取)(如果true，重寫單個節點狀態)。

autolock默認情況下，節點是否應該被鎖定(根本不能拖放)(如果true，重寫單個節點狀態)。

autounselectify默認情況下，節點是否應該被取消選擇(不可更改的選擇狀態)(如果true，重寫單個元素狀態)。

呈現選項

headless一個方便的選項，將實例初始化爲無頭運行。您不需要在隱式無頭環境(例如Node.js)中設置它。但是，設置headless: true如果您想在瀏覽器中使用無頭實例。

styleEnabled指示是否使用樣式的布爾值。對於無頭(即瀏覽器外部)環境，顯示是不必要的，因此也不需要樣式設計，從而加快了代碼的速度。如果特殊情況需要，可以在無頭環境中手動啓用樣式。請注意，如果計劃呈現圖形，禁用樣式是沒有意義的。

hideEdgesOnViewport：呈現提示，當設置爲true使渲染器在操作視圖時不會呈現邊緣。這使得搖攝、縮放、拖動等等對於大型圖形更有響應性。由於性能的提高，這個選項現在很大程度上是沒有意義的。

textureOnViewport：呈現提示，當設置爲true使渲染器在搖攝和縮放過程中使用紋理，而不是繪製元素，從而使大型圖形更具響應性。由於性能的提高，這個選項現在很大程度上是沒有意義的。

motionBlur：呈現提示，當設置爲true使渲染器使用運動模糊效果，使幀之間的轉換看起來更流暢。這可以提高大圖的感知性能。由於性能的提高，這個選項現在很大程度上是沒有意義的。

motionBlurOpacity*何時motionBlur: true，此值控制運動模糊幀的不透明度。較高的值使運動模糊效應更加明顯。由於性能的提高，這個選項現在很大程度上是沒有意義的。

wheelSensitivity：縮放時更改滾動輪靈敏度。這是一個乘法修飾符。因此，0到1之間的值降低了靈敏度(縮放速度較慢)，而大於1的值則增加了靈敏度(縮放速度更快)。這個選項被設置爲一個正常的值，對於Linux、Mac和Windows上的主流鼠標(蘋果、羅技、微軟)來說，這個值很好。如果默認值在您的特定系統上看起來太快或太慢，您可能在操作系統或小衆鼠標中設置了非默認鼠標。你不應該改變這個值，除非你的應用程序只在特定的硬件上工作。否則，對於大多數用戶來說，您可能會使縮放速度太慢或太快。

pixelRatio：用手動設置的值覆蓋屏幕像素比(1.0(如已確定，建議)。這可以通過減少需要呈現的有效區域來提高密度顯示器的性能，儘管在最近的瀏覽器版本中，這一點並不那麼必要。如果要使用硬件的實際像素比，可以設置pixelRatio: 'auto'(默認)

圖形處理

cy.add()

將元素添加到圖中並返回它們。

加(萊歐比 )

向圖中添加指定的元素。

萊歐比
指定元素的普通對象。

加(萊奧比斯 )

將指定的元素添加到圖形中。

萊奧比斯
由普通對象指定的元素數組。

加(埃爾斯 )

將指定的元素添加到圖形中。

埃爾斯
元素的集合。

細節

如果使用普通元素對象，則初始化時使用的相同格式必須被跟蹤。

如果將現有元素的集合指定到不同的核心實例，則會添加這些元素的副本，從而允許在Cytoscape.js實例之間有效地傳輸元素。

實例

從普通對象中添加節點。

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

將節點和邊作爲普通對象添加到圖中：

// can use reference to eles later
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" } }
]);

刪除()

從圖形中刪除元素並返回它們。

移除(埃爾斯 )

刪除指定的元素。

埃爾斯
要刪除的元素集合。

移除(選擇器 )

刪除圖中與指定選擇器匹配的元素。

選擇器
與此選擇器匹配的元素將被刪除。

細節

請注意，刪除節點必然會刪除其連接的邊緣。

雖然該函數指定的元素已從圖形中刪除，但它們可能仍然存在於內存中。但是，幾乎所有函數都不能處理已刪除的元素。例如，eles.neighborhood()對於已刪除的元素，函數將失敗：圖上下文之外的元素不能定義鄰域。實際上，已刪除的元素只存在，因此可以將它們還原回原始核心實例或新實例。

實例

刪除元素：

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

移除集合：

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

刪除與選擇器匹配的元素：

cy.remove("node[weight > 50]"); // remove nodes with weight greater than 50

cy.Collection()

返回一個新的空集合。

cy.Collection()

找個空的收藏品。

細節

此函數對於構建集合非常有用。

實例

保存已單擊的節點集合：

var collection = cy.collection();
cy.nodes().on("click", function(){
collection = collection.add(this);
});

cy.getElementById()

別名：cy.$id()

以非常出色的方式從其ID中獲取元素。

cy.getElementById(ID )

ID
要獲取的元素的ID。

實例

cy.getElementById('j');

使用較短的別名：

cy.$id('j');

Cy.$()等人

獲取圖中匹配選擇器或篩選器函數的元素。

美元選擇器 )

獲取圖中與指定選擇器匹配的元素。

選擇器
元素應該匹配的選擇器。

Cy.Element(選擇器 )

獲取圖中與指定選擇器匹配的元素。

選擇器
元素應該匹配的選擇器。

cy.node(選擇器 )

獲取圖中與指定選擇器匹配的節點。

選擇器
節點應該匹配的選擇器。

圓邊(選擇器 )

獲取圖中與指定選擇器匹配的邊。

選擇器
邊緣應該匹配的選擇器。

cy.filter(選擇器 )

獲取圖中與指定選擇器匹配的元素。

選擇器
元素應該匹配的選擇器。

cy.filter(職能(ele，i，eles) )

獲取圖中與指定篩選函數匹配的元素。

職能(ele，i，eles)
對於應該返回的元素返回true的Filter函數。
- 埃勒
  正在考慮進行篩選的當前元素。
- i
  用於對圖中的元素進行迭代的計數器。
- 埃爾斯
  正在篩選的元素集合。

細節

如果圖中沒有任何元素與選擇器匹配，則爲空。收藏會被歸還。

功能cy.$()作爲化名cy.filter()：省得你打字很方便。它類似於jQuery。$用於搜索文檔的別名

實例

獲取權重大於50的節點：

cy.nodes("[weight>50]");

用源節點獲取邊n0:

cy.edges("[source='j']");

獲得權重大於50的所有節點和邊：

cy.elements("[weight>50]");
cy.filter("[weight>50]"); // works the same as the above line

使用過濾器函數獲取權重大於50的節點：

cy.filter(function(element, i){
if( element.isNode() && element.data("weight") > 50 ){
return true;
}
return false;
});

cy.批()等人

允許對元素進行操作，而不觸發多個樣式計算或多次重繪。

賽.批(功能() )

功能()
可以對元素進行批處理更新的回調。

cy.startBatch()

手動開始批處理(對於異步情況有用)。

cy.endBatch()

結束手動批處理(對於異步情況有用)。

細節

通常，當您修改元素時，每次修改都會觸發樣式計算和重繪-取決於重繪的時間。例如，以下內容將導致兩種類型的計算和至少一次抽籤：

cy.$('#j')
.data('weight', '70') // style update
.addClass('funny') // style update AGAIN
.removeClass('serious') // style update YET AGAIN
// at least 1 redraw here
// possibly 3 total depending on speed of above operations
// (for one ele almost certainly 1 redraw, but consider many eles)
;

對於少數元素上的幾個操作來說，這不是一個問題，但是對於許多元素上的許多操作，您最終會得到冗餘樣式的計算和可能的冗餘重繪。在最壞的情況下，你eles.length * numOps樣式更新和重繪-而且樣式更新和重繪都可能很昂貴。在最壞的情況下使用cy.batch()，您將樣式更新限制爲eles.length你把重畫限制在一次。

因此，此函數對於同時對元素進行許多更改非常有用。當指定的回調函數完成時，只有需要它的元素纔會更新它們的樣式，呈現程序最多隻進行一次重繪。

這使得對元素的修改非常有效，但也有一些注意事項。在批處理回調過程中，

無法可靠地讀取元素樣式或維度(它可能已更改，或計算值可能已過時)，
你可能不想用eles.style()等等，因爲它們迫使樣式繞行，而不是重新計算。

實例

同步風格：

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.destroy()功能不是必需的，但在某些情況下可以方便。它清除引用和呈現循環，從而可以垃圾收集實例使用的內存。

如果從頁面中刪除容器DOM元素，則會自動清除實例。同樣，調用cy.destroy()進行此清理，並從頁面中刪除容器的所有子級。

在無頭運行Cytoscape.js時，使用cy.destroy()只有在顯式啓用樣式功能時纔有必要。

若要刪除實例使用的內存，必須刪除對該實例的所有引用，以便垃圾收集。

cy.cratch()

延拓函數：此函數用於擴展。

設置或獲取劃痕數據，其中可以存儲臨時或非JSON數據。應用程序級別的劃痕數據應該使用以下劃線爲前綴的命名空間，如'_foo'。這類似於更常見的ele.scratch()但是對於全局圖形數據。

cy.cratch()

獲取核心的整個劃痕對象。

擦傷(命名空間 )

獲取特定命名空間的便籤。

命名空間
名稱空間字符串。

擦傷(命名空間, 價值 )

將劃痕設置在特定的命名空間中。

命名空間
名稱空間字符串。
價值
要在指定命名空間設置的值。

cy.emoveScratch()

延拓函數：此函數用於擴展。

刪除劃痕數據。您應該只在您自己的命名空間中刪除便籤數據。這類似於更常見的ele.removeScratch()但是對於全局圖形數據。

Cy.emoveScratch(命名空間 )

刪除特定命名空間中的劃痕數據。

命名空間
名稱空間字符串。

事件

西恩()

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

綁定到圖形中發生的事件。

西恩(事件[, 選擇器], 功能(事件) )

事件
以空格分隔的事件名稱列表。
選擇器 [任擇]
一個選擇器，用於指定運行處理程序的元素。
功能(事件)
當其中一個指定事件發生時調用的處理程序函數。
- 事件
  事件對象。

實例

綁定到從匹配指定元素的元素中冒泡的事件。node選擇器：

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

綁定到核心接收的所有TAP事件：

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

cy.proeneOn()

別名：cy.pon()

獲取在圖形上發出的任何指定事件的第一個解析承諾。

承諾(事件[, 選擇器] )

事件
以空格分隔的事件名稱列表。
選擇器 [任擇]
一個選擇器，用於指定運行處理程序的元素。

實例

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

cy.one()

綁定到圖形中發生的事件，並只運行處理程序一次。

西.一(事件[, 選擇器], 功能(事件) )

事件
以空格分隔的事件名稱列表。
選擇器 [任擇]
一個選擇器，用於指定運行處理程序的元素。
功能(事件)
當其中一個指定事件發生時調用的處理程序函數。
- 事件
  事件對象。

實例

cy.one('tap', 'node', function(){
console.log('tap!');
});
cy.$('node').eq(0).trigger('tap'); // tap!
cy.$('node').eq(1).trigger('tap'); // nothing b/c already tapped

cy.emoveListener()

別名：cy.off(), cy.unbind(), cy.unlisten()

刪除事件處理程序。

cy.emoveListener(事件[, 選擇器][, 處理程序] )

事件
以空格分隔的事件名稱列表。
選擇器 [任擇]
用於綁定到事件的相同選擇器。
處理程序 [任擇]
要刪除的處理程序函數的引用。

實例

對於所有處理程序：

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

對於特定的處理程序：

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

cy.emit()

別名：cy.trigger()

發出一個或多個事件。

發射(事件[, [外] )

事件
要發出的事件名稱的空格分隔列表。
外系 [任擇]
傳遞給處理程序的附加參數數組。

實例

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

塞雷德()

圖一準備好就運行回調(即加載數據並完成初始佈局)。如果圖形已經準備好，則會立即調用回調。如果數據是同步加載的，並且所使用的佈局是離散/同步/一致/未指定的，則不需要cy.ready().

準備(功能(事件) )

功能(事件)
一旦圖準備就緒，回調就會運行，其中event.cy指核心(cy).
- 事件
  這，這個，那，那個ready事件。

視口操縱

cy.Container()

獲取圖形可視化的HTML DOM元素。如果實例是無頭的，則返回一個空值。

中心()

別名：cy.centre()

將圖形平移到集合的中心。

中心()

以圖中的所有元素爲中心。

中心(埃爾斯 )

以指定的元素爲中心。

埃爾斯
收藏集中在。

細節

如果沒有指定集合，則圖集中在圖中的所有節點和邊上。

實例

將圖形中心放在節點上j:

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

cy.Fit()

平移和縮放圖形，以適應一個集合。

cy.Fit()

適合於圖表中的所有元素。

賽特([[埃爾斯][, 填充物] )

適合指定的元素。

埃爾斯 [任擇]
適合的收藏。
填充物 [任擇]
圖周圍的填充量(以像素爲單位)。

細節

如果沒有指定集合，則該圖適合於圖中的所有節點和邊。

實例

在節點上擬合圖j和e:

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

重設()

將圖形重置到默認的縮放級別和搖攝位置。

重設()

重置變焦和平移。

細節

這會在縮放級別1將視區重置爲原點(0，0)。

實例

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

cy.PAN()

獲取或設置圖形的搖攝位置。

cy.PAN()

獲取當前的搖攝位置。

蘇鐵(渲染位置 )

設置當前搖攝位置。

渲染位置
將圖形平移到。

細節

此函數將圖形視圖原點平移到指定的呈現像素位置。

實例

將圖形平移到(100，100)呈現像素。

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

cy.panBy()

通過指定的呈現位置向量對圖形進行相對泛化。

潘比渲染位置 )

渲染位置
繪製的位置向量來平移圖形。

細節

此函數以呈現像素爲單位，相對地按指定位置移動視圖。也就是說，指定向右移動100意味着將屏幕上的100個像素轉換到右邊。

實例

將圖形平移到右邊100個像素。

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

cy.panningEnable()

獲取或設置是否啓用搖攝。

cy.panningEnable()

獲取是否啓用搖攝。

cy.panningEnable(布爾 )

設置是否啓用搖攝。

布爾
一個真實的價值可以使人進行搖攝；而虛幻的價值則會使它失效。

實例

使：

cy.panningEnabled( true );

禁用：

cy.panningEnabled( false );

cy.userPanningEnable()

獲取或設置是否啓用用戶事件(例如拖動圖形背景)的搖攝。

cy.userPanningEnable()

獲取是否啓用用戶搖攝。

cy.userPanningEnable(布爾 )

設置是否啓用用戶搖攝。

布爾
一個真實的值使用戶能夠進行搖攝；而Falsey值則禁用它。

實例

使：

cy.userPanningEnabled( true );

禁用：

cy.userPanningEnabled( false );

cy.Zoo()

獲取或設置圖形的縮放級別。

cy.Zoo()

得到變焦級別。

西.變焦水平 )

設置縮放級別。

水平
要設置的縮放級別。

西.變焦備選方案 )

設置縮放級別。

備選方案
放大的選項。
- 水平
  要設置的縮放級別。
- 位置
  縮放的位置。
- 渲染位置
  要縮放的渲染位置。

細節

縮放級別必須是正數。忽略不是數字的縮放級別；屬於數字但超出有效縮放級別範圍的縮放級別被認爲是最近的有效縮放級別。

當放大某一點時cy.zoom( options )，這些選項定義如下。

用於縮放呈現的位置(即屏幕上的位置)：

cy.zoom({
level: 2.0, // the zoom level
renderedPosition: { x: 100, y: 100 }
});

用於放大模型位置：

cy.zoom({
level: 2.0, // the zoom level
position: { x: 0, y: 0 }
});

由於明顯的原因，您可以縮放某個位置或呈現的位置，但不能同時放大兩個位置。您應該只指定一個options.position或options.renderedPosition.

實例

放大到因子2

cy.zoom(2);

放大到最小縮放因子

cy.zoom(0); // 0 is outside of the valid range and
// its closest valid level is the min

放大到最大縮放因子

cy.zoom(1/0); // infinity is outside of the valid range and
// its closest valid level is the max

縮放節點

var pos = cy.nodes("#j").position();
cy.zoom({
level: 1.5,
position: pos
});

cy.zoomingEnable()

獲取或設置是否啓用縮放。

cy.zoomingEnable()

獲取是否啓用縮放。

可放大的(布爾 )

設置是否啓用縮放。

布爾
一個真實的值可以放大；虛假的值會使它失效。

實例

使：

cy.zoomingEnabled( true );

禁用：

cy.zoomingEnabled( false );

cy.userZoomingEnable()

獲取或設置是否啓用用戶事件縮放(例如鼠標輪、按下縮放)。

cy.userZoomingEnable()

獲取是否啓用用戶縮放。

用戶ZoomingEnable(布爾 )

設置是否啓用用戶縮放。

布爾
一個真實的值使用戶能夠縮放，而Falsey值則禁用它。

實例

使：

cy.userZoomingEnabled( true );

禁用：

cy.userZoomingEnabled( false );

Cy.minZoom()

獲取或設置最小縮放級別。

Cy.minZoom()

獲取最小縮放級別。

[醫]Cy.minZoom(變焦 )

設置最小縮放級別。

變焦
要使用的新的最小縮放級別。

Cy.maxZoom()

獲取或設置最大縮放級別。

Cy.maxZoom()

獲取最大縮放級別。

Cy.maxZoom(變焦 )

設置最大縮放級別。

變焦
要使用的新的最大縮放級別。

cy.viewport()

在一次調用中設置視口狀態(PAN&縮放)。

cy.viewport(變焦, 平底鍋 )

變焦
要設置的縮放級別。
平底鍋
要設置(呈現的位置)的平底鍋。

實例

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

cy.boxSelectionEnable()

獲取或設置是否啓用了複選框選擇。如果啓用了搖攝，則用戶必須持有一個Shift、Control、meta或Alt向下以啓動框選擇。

cy.boxSelectionEnable()

獲取是否啓用了複選框選擇。

Cy.boxSelectionEnable(布爾 )

設置是否啓用複選框選擇。

布爾
一個真實的值使選擇框成爲可能；而Falsey值則禁用它。

實例

使：

cy.boxSelectionEnabled( true );

禁用：

cy.boxSelectionEnabled( false );

cy.wide()

獲取視口的屏幕寬度(以像素爲單位)。

Cy.High()

獲取視口的屏幕高度(以像素爲單位)。

cy.區段()

獲取視口的範圍，這是模型座標中的一個邊框，它使您知道在視圖中可以看到哪些模型位置。

細節

此函數以格式返回普通對象邊界框。{ x1, y1, x2, y2, w, h }.

Cy.autolock()

獲取或設置節點是否自動鎖定(即如果true，節點儘管處於各自的狀態，但仍被鎖定)。

Cy.autolock()

獲取是否啓用自動收費器。

奧托洛克(Cy.autolock)布爾 )

設置是否啓用自動鎖存。

布爾
一個真實的價值可以自動鎖定，而虛假的價值則會使它失效。

實例

使：

cy.autolock( true );

禁用：

cy.autolock( false );

cy.autooungrabify()

獲取或設置節點是否自動未被捕獲(即，如果true，儘管節點處於單獨的狀態，但它們仍未被捕獲)。

cy.autooungrabify()

獲取是否啓用了自動生成。

Cy.autooungrabify(布爾 )

設置是否啓用自動生成。

布爾
一個真實的值允許自動抓取；一個虛假的值會使它失效。

實例

使：

cy.autoungrabify( true );

禁用：

cy.autoungrabify( false );

cy.autoounselectify()

獲取或設置節點是否自動取消選擇(即，如果true，儘管節點處於單獨的狀態，但它們是不可選擇的)。

cy.autoounselectify()

獲取是否啓用了自動選擇。

Cy.autoounselectify(布爾 )

設置是否啓用自動選擇。

布爾
一個真實的值允許自動選擇；一個假值禁用它。

實例

使：

cy.autounselectify( true );

禁用：

cy.autounselectify( false );

cy.forceRender()

強制渲染器重新繪製(即繪製一個新框架)。

細節

此函數強制渲染器繪製新框架。它對於非常特定的EDgecase很有用，比如在某些UI擴展中，但是大多數開發人員不應該需要它。

cy.resize()

別名：cy.invalidateDimensions()

強制呈現器重新計算視口邊界。

細節

如果您的代碼調整了圖形的尺寸或位置(即通過更改保存圖形的HTML DOM元素的樣式，或者通過更改DOM元素在DOM樹中的位置)，則需要調用cy.resize()來調整圖形的大小並重新繪製自己。

如果圖中的點擊被偏移而不是位於正確的位置，那麼調用cy.resize()是必要的。如果容器元素不是空的，點擊也會被抵消；容器應該是空的，所以可視化可以使用它。

js不能自動監視視口的邊界框，因爲查詢DOM以獲取這些維度可能很昂貴。儘管cy.resize()自動爲您調用window氏resize事件，沒有resize或style事件，用於任意DOM元素。

動畫

cy.動畫片()

獲取視圖端口當前是否處於動畫狀態。

cy.activate()

動畫視口。

仙人掌(備選方案 )

備選方案
包含動畫細節的對象。
- 變焦
  縮放級別(數字)或縮放配置對象，其中圖形將被動畫化。
  - 水平
    要使用的縮放級別。
  - 位置
    縮放發生的位置。這將自動修改PAN，使指定的模型位置在縮放期間保持在視口範圍中的相同位置。
  - 渲染位置
    出現縮放的呈現位置，作爲使用模型位置的替代方法。這將自動修改PAN，使得模型位置，對應於動畫開始時呈現的位置，在縮放期間在視口範圍內保持相同的位置。
- 平底鍋
  一個平移的位置，圖形將被動畫化。
- 泛比
  一個相對平移的位置，圖形將被動畫化。
- 適配
  包含圖形動畫的合適選項的對象。
  - 埃爾斯
    將安裝視口的元素或選擇器。
  - 填充物
    填充物與配件一起使用。
- 中心
  包含中間選項的對象，圖形將從該對象中獲得動畫。
  - 埃爾斯
    以視口爲中心的元素或選擇器。
- 持續時間
  動畫的持續時間(毫秒)。
- 排隊
  指示是否對動畫進行排隊的布爾值。
- 完全
  動畫完成後要調用的函數。
- 步進
  每次動畫步驟調用的函數。
- 放鬆
  A transition-timing-function放鬆風格的字符串，塑造動畫的進度曲線。

實例

手動平底鍋和變焦：

cy.animate({
pan: { x: 100, y: 100 },
zoom: 2
}, {
duration: 1000
});

適合要素：

var j = cy.$('#j');
cy.animate({
fit: {
eles: j,
padding: 20
}
}, {
duration: 1000
});

動畫()

得到一個動畫視野。

動畫(備選方案 )

備選方案
包含動畫細節的對象。
- 變焦
  縮放級別(數字)或縮放配置對象，其中圖形將被動畫化。
  - 水平
    要使用的縮放級別。
  - 位置
    縮放發生的位置。這將自動修改PAN，使指定的模型位置在縮放期間保持在視口範圍中的相同位置。
  - 渲染位置
    出現縮放的呈現位置，作爲使用模型位置的替代方法。這將自動修改PAN，使得模型位置，對應於動畫開始時呈現的位置，在縮放期間在視口範圍內保持相同的位置。
- 平底鍋
  一個平移的位置，圖形將被動畫化。
- 泛比
  一個相對平移的位置，圖形將被動畫化。
- 適配
  包含圖形動畫的合適選項的對象。
  - 埃爾斯
    將安裝視口的元素或選擇器。
  - 填充物
    填充物與配件一起使用。
- 中心
  包含中間選項的對象，圖形將從該對象中獲得動畫。
  - 埃爾斯
    以視口爲中心的元素或選擇器。
- 持續時間
  動畫的持續時間(毫秒)。
- 放鬆
  A transition-timing-function放鬆風格的字符串，塑造動畫的進度曲線。

cy.delay()

在視圖端口的動畫之間添加一個延遲。

延遲(持續時間, 完全 )

持續時間
延遲的時間應該以毫秒爲單位。
完全
延遲完成時要調用的函數。

實例

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

Cy.delay動畫()

延遲動畫視野。

延遲動畫(持續時間 )

持續時間
延遲的時間應該以毫秒爲單位。

停()

停止當前正在運行的所有視圖端口動畫。

停(清場, JumpToEnd )

清場
一個布爾值，指示是否應該清空動畫隊列。
JumpToEnd
一個布爾值，指示當前運行的動畫是否應該跳到它們的末端，而不是中途停止。

實例

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

cy.ClearQueue()

刪除視圖端口的所有排隊動畫。

佈局

cy.laying()

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

獲得一個新的佈局，該佈局可以用於算法地定位圖中的節點。

佈局(備選方案 )

備選方案
佈局選項。

您必須指定options.name與您希望使用的佈局的名稱。

此函數創建並返回佈局對象。您可能希望爲更高級的應用程序保留對佈局的引用，例如同時運行多個佈局。

請注意，您必須調用layout.run()爲了讓它影響圖形。

在圖的子集上進行佈局的類似物存在於eles.layout().

實例

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

風格

cy.type()

獲取入口點以修改初始化後圖形的視覺樣式。

cy.type()

獲取當前樣式對象。

西式(樣式表 )

分配一個新的樣式表來替換現有的樣式表。

樣式表
要麼是cytoscape.stylesheet()對象、字符串樣式表或JSON樣式表(所接受的格式與options.style在初始化時)。

細節

您可以使用此函數在初始化後獲得對視覺樣式(樣式表)的訪問。如果您需要在運行時更改整個樣式表，這是非常有用的。

通過引用設置新樣式：

// here a string stylesheet is used, but you could also use json or a cytoscape.stylesheet() object
var stringStylesheet = 'node { background-color: cyan; }';
cy.style( stringStylesheet );

爲圖設置一個全新的樣式，指定選擇器和風格屬性通過函數調用：

cy.style()
.resetToDefault() // start a fresh default stylesheet
// and then define new styles
.selector('node')
.style('background-color', 'magenta')
// ...
.update() // update the elements in the graph with the new style
;

還可以添加到現有樣式表中：

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

您還可以通過普通的JSON設置樣式：

cy.style()
.fromJson([
{
selector: 'node',
style: {
'background-color': 'red'
}
}
// , ...
])
.update() // update the elements in the graph with the new style
;

還可以從樣式字符串(可能從服務器上的文件中提取的樣式)設置樣式：

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

您還可以獲得當前樣式爲JSON：

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

出口

cy.png()

將當前圖形視圖導出爲PNG圖像。

齊平(備選方案 )

備選方案
出口選擇。
- 輸出量
  是否應該輸出'base64uri'(違約)，'base64'，或'blob'.
- BG
  圖像的背景顏色(默認情況下是透明的)。
- 滿的
  是否導出當前視圖(false)或整個圖(true).
- 比例尺
  此值指定一個正數，用於縮放結果圖像的大小。
- 最大寬度
  指定自動組合的比例。maxHeight這樣，生成的圖像就不會比maxWidth.
- 最大高度
  指定自動組合的比例。maxWidth這樣，結果的圖像不會比maxHeight.

細節

默認情況下，導出會考慮當前屏幕像素密度，以便圖像具有相同的屏幕質量。如果maxWidth或maxHeight指定選項，然後忽略屏幕像素密度，以便圖像能夠適應指定的尺寸。

實例

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

示例圖像標記：

cy.jpg()

別名：cy.jpeg()

將當前圖形視圖導出爲JPG圖像。

cy.jpg(備選方案 )

備選方案
出口選擇。
- 輸出量
  是否應該輸出'base64uri'(違約)，'base64'，或'blob'.
- BG
  圖像的背景顏色(默認爲白色)。
- 滿的
  是否導出當前視圖(false)或整個圖(true).
- 比例尺
  此值指定一個正數，用於縮放結果圖像的大小。
- 最大寬度
  指定自動組合的比例。maxHeight這樣，生成的圖像就不會比maxWidth.
- 最大高度
  指定自動組合的比例。maxWidth這樣，結果的圖像不會比maxHeight.
- 質量
  指定圖像的質量。0(低質量，低文件大小)1(高質量，高文件大小)。如果未設置，則使用瀏覽器的默認質量值。

細節

JPEG格式是有損的，而PNG則不是。這意味着cy.jpg()對於文件大小比像素完美圖像更重要的情況是有用的。JPEG壓縮會使你的圖像(特別是邊緣線)變得模糊和扭曲。

實例

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

示例圖像標記：

cy.json()

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

cy.json()

將圖形導出爲JSON。

cy.json(賽義森 )

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

賽義森
具有對應於應該更改的狀態的字段的對象。

細節

此函數返回用於初始化。如果您想保存圖的整個狀態，無論是出於您自己的目的，還是爲了將來恢復該圖形狀態，您都會發現這個函數很有用。

此函數還可用於設置圖狀態，如cy.json( cyJson )中的每個字段cyJson就是在圖表中發生變異。中定義的每個字段cyJson, cy更新以與所發出的相應事件匹配。這允許對圖形進行聲明性更改。

爲cy.json( cyJson )，都是可變的初始化選項是支持的。

設置時cy.json({ elements: ... })

所包含的元素按指定的方式進行變異(即它們將由ele.json( eleJson )),
不包含在圖中的元素被添加，並且
不包含的元素將從圖形中移除。

設置時cy.json({ style: ... })

替換了整個樣式表，並且
對每個元素重新計算樣式。

更新樣式表非常昂貴。類似地，更新大型圖的現有元素可能會花費很大-因爲每個元素都需要考慮，而且每個元素可能每個字段都需要考慮。對於元素，一個更便宜的選擇是有選擇地調用ele.json(...)只有需要更新的字段。

實例

console.log( cy.json() );

cy.json({
zoom: 2
});

集合包含一組節點和邊緣。調用函數將該函數應用於集合中的所有元素。從集合讀取值時，eles.data()例如，返回集合中第一個元素的值。這遵循jQuery慣例。例如：

var weight = cy.nodes().data("weight");
console.log( cy.nodes()[0].data("weight") + ' == ' + weight ); // weight is the first ele's weight

通過使用選擇器將集合縮小到一個元素(即eles.size() === 1)或eles.eq()功能。

圖形處理

ele.cy()

獲取擁有元素的核心實例。

刪除()

從圖中移除元素，並返回通過此調用刪除的所有元素。

細節

此函數從圖形中移除調用元素。元素沒有被刪除-它們仍然存在於內存中-但是它們不在圖形中。

已刪除的元素只存在於其原始核心實例或其他核心實例中。已刪除的元素不再是圖形的一部分，因此不再是功能性元素：在圖的上下文之外，對它來說沒有什麼真正的意義了。它只存在於這個模糊狀態中，所以以後可以將它添加回某個核心實例。

實例

刪除選定的元素：

cy.$(':selected').remove();

刪除()

獲取元素是否已從圖形中移除。

ele.inside()

獲取元素是否在圖中(即未移除)。

恢復()

將刪除的元素放回圖表中。

細節

該函數將圖中已刪除的元素放回原處。如果元素已經在圖表中，它將什麼也不做。

如果元素的ID與圖中的元素相同，則無法還原它。在這種情況下，您應該爲要添加的元素指定一個替代ID。

實例

// remove selected elements
var eles = cy.$(':selected').remove();
// ... then some time later put them back
eles.restore();

eles.clon()

別名：eles.copy()

獲取一個新集合，其中包含調用集合中元素的克隆(即副本)。

移動()等人

有效地將邊緣移動到不同的節點或將節點移動到不同的父節點。返回修改後的(實際上是新的)元素。

急轉彎.移動(位置 )

將邊緣移動到不同的節點。

位置
邊緣被移動的地方。您可以指定一個新的源、一個新的目標，或者兩者都指定。
- 來源
  新源節點的ID。
- 目標
  新目標節點的ID。

節點移動(位置 )

將節點移動到不同的父節點。

位置
移動節點的位置。
- 父母
  新父節點的ID(使用null沒有父母)。

細節

請注意，此函數並不真正移動元素。這在圖的語義上是不可能的。相反，這個函數

獲取元素的JSON副本，
刪除原始元素，
按指定的方式修改JSON副本，並且
從JSON複製和恢復關係中添加新元素(在複合節點後代和連接邊的情況下)。

這會產生同樣的效果，就好像元素已經被移動了一樣，同時維護了圖形的正確語義。

實例

移動邊緣：

cy.$('#ej').move({
target: 'g'
})

事件

Eles.on()

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

綁定到發生在元素上的事件。

上(事件[, 選擇器], 功能(事件) )

事件
以空格分隔的事件名稱列表。
選擇器 [任擇]
指定運行處理程序的子元素的委託選擇器。
功能(事件)
當其中一個指定事件發生時調用的處理程序函數。
- 事件
  事件對象。

實例

cy.$('#j').on('tap', function(evt){
console.log( 'tap ' + evt.target.id() );
});

承諾()

別名：eles.pon()

獲取在集合中的任何元素上發出的任何指定事件的第一個解析承諾。

承諾(事件[, 選擇器] )

事件
以空格分隔的事件名稱列表。
選擇器 [任擇]
一個選擇器，用於指定發出處理程序的元素。

實例

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

eles.one()

綁定每個元素每個事件發出一次的回調函數。

一(事件[, 選擇器], 功能(事件) )

事件
以空格分隔的事件名稱列表。
選擇器 [任擇]
指定運行處理程序的子元素的委託選擇器。
功能(事件)
當其中一個指定事件發生時調用的處理程序函數。
- 事件
  事件對象。

細節

對於指定給此函數的每個事件，每個元素觸發一次處理程序函數。這對於在調用集合中的每個元素上發生一次的一次性事件非常有用。

對於指定了委託選擇器的複合節點，語義要複雜一些：請注意，在每個元素中調用一個處理程序一次。呼叫集合，而處理程序是通過匹配子代元素來觸發的。

實例

cy.$('node').one('tap', function(e){
var ele = e.target;
console.log('tapped ' + ele.id());
});

一次()

綁定每個集合每個事件發出一次的回調函數。

一次(事件[, 選擇器], 功能(事件) )

事件
以空格分隔的事件名稱列表。
選擇器 [任擇]
指定運行處理程序的子元素的委託選擇器。
功能(事件)
當其中一個指定事件發生時調用的處理程序函數。
- 事件
  事件對象。

細節

對於指定給此函數的每個事件，將觸發一次處理程序函數。這對於只發生在調用集合中的一個元素上的一次性事件很有用。

實例

cy.$('node').once('click', function(e){
var ele = e.target;
console.log('clicked ' + ele.id());
});

eles.emoveListener()

別名：eles.off(), eles.unbind(), eles.unlisten()

解除對元素的一個或多個回調函數的綁定。

eles.emoveListener(事件[, 選擇器][, 處理程序] )

事件
以空格分隔的事件名稱列表。
選擇器 [任擇]
用於綁定到事件的同一委託選擇器。
處理程序 [任擇]
要刪除的處理程序函數的引用。

實例

var j = cy.$('#j');
var handler = function(){ console.log('tap') };
// bind
j.on('tap', handler);
// bind some other handler
j.on('tap', function(){
console.log('some other handler');
});
j.emit('tap'); // 'tap' & 'some other handler'
// unbind the renferenced handler
j.removeListener('tap', handler);
j.emit('tap'); // some other handler
// unbind all tap handlers (including unnamed handler)
j.removeListener('tap');

eles.emit()

別名：eles.trigger()

在元素上發出事件。

發射(事件[, [外] )

事件
要發出的事件名稱的空格分隔列表。
外系 [任擇]
傳遞給處理程序的附加參數數組。

實例

var j = cy.$('#j');
j.on('tap', function(){
console.log('tap!!');
});
j.emit('tap'); // tap!!

數據

eles.data()等人

別名：eles.attr()

讀取和寫入與元素相關的開發人員定義的數據。

ele.data()

獲取元素的所有數據。

電子數據(名字，姓名 )

獲取元素的特定數據字段。

名字，姓名
要獲取的字段的名稱。

電子數據(名字，姓名, 價值 )

爲元素設置特定的數據字段。

名字，姓名
要設置的字段的名稱。
價值
要爲字段設置的值。

電子數據(OBJ )

通過一個對象一次更新多個數據字段。

OBJ
包含要更新數據字段的名稱-值對的對象。

細節

只能輸入JSON可序列化的數據。ele.data()。對於臨時數據或不可序列化數據，請使用ele.scratch().

以下字段是不可變的：

id*id字段用於唯一標識圖中的元素。
source & target這些字段定義邊緣與節點的關係，創建後不能更改此關係。
parent*parent字段定義父(複合)節點。

實例

var j = cy.$('#j');
// set the weight field in data
j.data('weight', 60);
// set several fields at once
j.data({
name: 'Jerry Jerry Dingleberry',
height: 176
});
var weight = j.data('weight');

eles.emoveData()

別名：eles.removeAttr()

刪除與元素關聯的開發人員定義的數據。

eles.emoveData()

移除元素的所有可變數據字段。

eles.emoveData(人名 )

移除元素的指定可變數據字段。

人名
要刪除的字段的空格分隔列表。

細節

以下數據字段是不可變的，因此不能刪除它們：

id*id字段用於唯一標識圖中的元素。
source & target這些字段定義邊緣與節點的關係，創建後不能更改此關係。
parent*parent字段定義父(複合)節點。

ele.cratch()

延拓函數：此函數用於擴展。

設置或獲取劃痕數據，其中可以存儲臨時或非JSON數據。應用程序級別的劃痕數據應該使用以下劃線爲前綴的命名空間，如'_foo'.

ele.cratch()

獲取元素的整個劃痕對象。

抓取(命名空間 )

獲取特定命名空間的便籤。

命名空間
名稱空間字符串。

抓取(命名空間, 價值 )

將劃痕設置在特定的命名空間中。

命名空間
名稱空間字符串。
價值
要在指定命名空間設置的值。

細節

此函數用於存儲臨時數據，可能是非JSON數據。擴展-如佈局、渲染器等-使用ele.scratch()在他們的註冊名字上有名字。例如，名爲foo將使用命名空間。'foo'.

如果要對自己的應用程序級數據使用此函數，可以在您使用的名稱空間前綴下劃線，以避免與擴展發生衝突。例如，使用ele.scratch('_foo')在您的應用程序中，將避免與名爲foo.

此函數對於將非JSON數據關聯到元素非常有用。而數據存儲在ele.data()包括在ele.json()，存儲的數據ele.scratch()不是。這使得暫時存儲不可串行化的數據變得很容易。

實例

var j = cy.$('#j');
// entire scratchpad:
// be careful, since you could clobber over someone else's namespace or forget to use one at all!
var fooScratch = j.scratch()._foo = {};
// ... now you can modify fooScratch all you want
// set namespaced scratchpad to ele:
// safer, recommended
var fooScratch = j.scratch('_foo', {});
// ... now you can modify fooScratch all you want
// get namespaced scratchpad from ele (assumes set before)
var fooScratch = j.scratch('_foo');
// ... now you can modify fooScratch all you want

ele.emoveScratch()

延拓函數：此函數用於擴展。

刪除劃痕數據。您應該只在您自己的命名空間中刪除便籤數據。

刪除Scratch(命名空間 )

刪除特定命名空間中的劃痕數據。

命名空間
名稱空間字符串。

ele.id()

獲取元素ID的快捷方式。

ele.json()

獲取或變異元素的普通JavaScript對象表示形式。

ele.json()

獲取元素的JSON。

ele.json(列傑森 )

按指定的方式更改元素的狀態。

列傑森
對於對象中的每個字段，元素的狀態按指定的方式發生變化。

細節

此函數返回普通JSON表示元素的相同格式，用於初始化cy.add()等

此函數還可以使用普通JSON表示元素。中指定的每個字段ele.json( eleJson )與元素的當前狀態不同，元素相應地發生變異，併發出適當的事件。這可以用於聲明性地修改元素。

注意，簡單地將diff-補丁對象指定爲ele.json()，G.ele.json({ data: { foo: 'bar' } })只有更新foo在……裏面data。這避免了未更改字段上的差異開銷，這在進行多次調用時非常有用。ele.json()更大的圖。

實例

console.log( cy.$('#j').json() );

cy.$('#j').json({ selected: true });

eles.jsons()

獲取集合中所有元素的普通JavaScript對象表示的數組。

細節

此函數返回普通JSON表示在集合中的所有元素中，在初始化時使用的相同格式cy.add()等

實例

console.log( cy.elements().jsons() );

ele.group()

獲取定義元素類型的組字符串。

細節

組字符串是'nodes'對於節點和'edges'爲了邊緣。一般來說，您應該使用ele.isEdge()和ele.isNode()而不是ele.group().

ele.isNode()

獲取元素是否爲節點。

ele.isEdge()

獲取元素是否爲邊緣。

edge.isloop()

獲取邊緣是否爲循環(即源與目標相同)。

edge.isSimple()

獲取邊界是否簡單(即源與目標不同)。

元數據

節點度()等人

節點度(包含環 )

獲取節點的程度。

包含環
布爾值，指示在度計算中是否包括循環。

節點.索引(包含環 )

獲取節點的索引樹。

包含環
布爾值，指示在度計算中是否包括循環。

節點.度(包含環 )

獲取節點的輸出度。

包含環
布爾值，指示在度計算中是否包括循環。

節點，全部Degree(包含環 )

獲取節點集合的總程度。

包含環
布爾值，指示在度計算中是否包括循環。

nodes.minDegree(包含環 )

獲取集合中節點的最小程度。

包含環
布爾值，指示在度計算中是否包括循環。

nodes.maxDegree(包含環 )

獲取集合中節點的最大程度。

包含環
布爾值，指示在度計算中是否包括循環。

(包含環 )

獲取集合中節點的最小索引。

包含環
布爾值，指示在度計算中是否包括循環。

最大度(包含環 )

獲取集合中節點的最大索引。

包含環
布爾值，指示在度計算中是否包括循環。

nodes.minOut度表(包含環 )

獲取集合中節點的最小輸出度。

包含環
布爾值，指示在度計算中是否包括循環。

最大輸出度(包含環 )

獲取集合中節點的最大輸出度。

包含環
布爾值，指示在度計算中是否包括循環。

細節

度對於一個節點，程度是它所擁有的邊緣連接的數量。每次節點被引用爲source或target圖中的一個邊，它算作邊連接。

無度*對於節點，索引樹是它具有的傳入邊緣連接的數目。每次節點被稱爲target圖中的一個邊，它算作一個傳入的邊連接。

外度對於一個節點，輸出度是它所具有的輸出邊緣連接的數量。每次節點被稱爲source圖中的邊，這是一個外向的邊連接。

總度對於一組節點，總度是到集合中節點的邊緣連接的總數。

位置和尺寸

node.place()

別名：node.modelPosition(), node.point()

獲取或設置節點的(模型)位置。

node.place()

獲取整個位置對象。

節點位置(維數 )

獲取指定位置維度的值。

維數
要獲取的位置維度。

節點位置(維數, 價值 )

設置指定位置維度的值。

維數
要設置的位置維度。
價值
要設置爲維度的值。

節點位置(pos )

使用指定對象中的名稱-值對設置位置。

pos
指定表示要設置的維度的名稱-值對的對象。

細節

一個職位有兩個領域，x和y，這會產生數值。

實例

// get x for j
var x = cy.$('#j').position('x');
// get the whole position for e
var pos = cy.$('#e').position();
// set y for j
cy.$('#j').position('y', 100);
// set multiple
cy.$('#e').position({
x: 123,
y: 200
});

nodes.Shift()

通過給定的模型位置向量移動節點的位置。

節點移位(維數, 價值 )

將節點移動到'x'或'y'.

維數
要移動的位置尺寸。
價值
要移動維度的值。

節點移位(pos )

通過位置向量移動節點。

pos
指定表示要移動的維度的名稱-值對的對象。

節點位置()

別名：nodes.modelPositions(), nodes.points()

設置幾個具有函數的節點的(模型)位置。

節點位置(職能(ELEI) )

通過函數設置位置。

職能(ELEI)
一個回調函數，它返回要爲每個元素設置的位置。
- 埃勒
  被迭代的元素，函數應該返回要設置的位置。
- i
  當迭代集合中的元素時，元素的索引。

節點位置(pos )

根據單個位置對象爲所有節點設置位置。

pos
指定表示要設置的維度的名稱-值對的對象。

實例

cy.nodes().positions(function( node, i ){
return {
x: i * 100,
y: 100
};
});

node.renderedPosition()

別名：node.renderedPoint()

獲取或設置節點的呈現(屏幕上)位置。

node.renderedPosition()

獲取整個呈現的位置對象。

節點.renderedPosition(維數 )

獲取指定的呈現位置維度的值。

維數
要獲取的位置維度。

節點.renderedPosition(維數, 價值 )

設置指定的呈現位置維度的值。

維數
要設置的位置維度。
價值
要設置爲維度的值。

節點.renderedPosition(pos )

使用指定對象中的名稱-值對設置呈現的位置。

pos
指定表示要設置的維度的名稱-值對的對象。

節點.相對論性位置()

別名：node.relativePoint()

獲取或設置節點相對於其複合父節點的位置。

節點.相對論性位置()

獲取整個相對位置對象。

節點.相對位置(維數 )

獲取指定的相對位置維度的值。

維數
要獲取的位置維度。

節點.相對位置(維數, 價值 )

設置指定的相對位置維度的值。

維數
要設置的位置維度。
價值
要設置爲維度的值。

節點.相對位置(pos )

使用指定對象中的名稱-值對設置相對位置。

pos
指定表示要設置的維度的名稱-值對的對象。

ele.Width()等人

獲取元素的寬度。

ele.Width()

獲取元素的寬度。

ele.outerWidth()

獲取元素的外部寬度(包括寬度、填充和邊框)。

ele.renderedWidth()

獲取元素在呈現的維度中的寬度。

ele.renderedOuterWidth()

在呈現的維度中獲取元素的外部寬度(包括寬度、填充和邊框)。

ele.High()等人

獲取元素的高度。

ele.High()

獲取元素的高度。

ele.outerHight()

獲取元素的外部高度(包括高度、填充和邊框)。

ele.renderedHL.8()

獲取元素在呈現的維度中的高度。

ele.renderedOuterHight()

在呈現的維度中獲取元素的外部高度(包括高度、填充和邊框)。

eles.signingBox()

別名：eles.boundingbox()

獲取元素的邊界框。

eles.signingBox(備選方案 )

獲取模型座標中元素的邊界框。

備選方案
包含函數選項的對象。
- 包容節點
  指示是否在邊界框中包含節點的布爾值(默認值)。true).
- 包容性
  指示是否在邊框中包含邊的布爾值(默認值)true).
- 包含標籤
  指示是否在邊框中包含標籤的布爾值(默認值)true).
- 包括支出
  指示是否在邊界框中包含覆蓋(例如單擊節點時出現的覆蓋)的布爾值(默認值)。true).

細節

此函數返回帶字段的普通對象。x1, x2, y1, y2, w，和h定義。

eles.renderedLimingBox()

別名：eles.renderedBoundingbox()

獲取元素的呈現邊框。

eles.rendered頁邊框(備選方案 )

在呈現的座標中獲取元素的邊界框。

備選方案
包含函數選項的對象。
- 包容節點
  指示是否在邊界框中包含節點的布爾值(默認值)。true).
- 包容性
  指示是否在邊框中包含邊的布爾值(默認值)true).
- 包含標籤
  指示是否在邊框中包含標籤的布爾值(默認值)true).
- 包括支出
  指示是否在邊界框中包含覆蓋(例如單擊節點時出現的覆蓋)的布爾值(默認值)。true).

細節

此函數返回帶字段的普通對象。x1, x2, y1, y2, w，和h定義。

抓取()

獲取節點當前是否被抓取，這意味着用戶擁有該節點。

node.grabbable()

獲取用戶是否可以抓取節點。

nodes.grabify()

允許用戶抓取節點。

實例

cy.$('#j').grabify();

nodes.ungrabify()

不允許用戶抓取節點。

實例

cy.$('#j').ungrabify();

node.lock()

獲取節點是否已鎖定，意味着其位置不能更改。

nodes.lock()

鎖定節點，使其位置不能更改。

實例

cy.$('#j').lock();

解鎖()

解除節點的鎖定，以便可以更改節點的位置。

實例

cy.$('#j').unlock();

ele.active()

獲取元素是否處於活動狀態(例如，在用戶點擊、抓取等情況下)。

邊緣點

edge.ControlPoint()

獲取控制點模型位置的數組。curve-style: bezier或curve-style: unbundled-bezier邊緣。

細節

雖然控制點可以在CSS中相對指定，但此函數返回控制點的絕對模型位置。這些點是按源對目標方向的順序指定的。

此函數適用於捆綁的Bezier，但它不適用於捆綁包中的中間直線邊緣。

edge.secmentPoint()

獲取分段點模型位置(即彎曲點)的數組。curve-style: segments邊緣。

細節

雖然段點可以在樣式表中相對指定，但此函數返回段點的絕對模型位置。這些點是按源對目標方向的順序指定的。

edge.SourceEndpoint()

獲取邊緣結束位置的模型位置，指向源節點。

edge.targetEndpoint()

獲取邊緣結束位置的模型位置，指向目標節點。

中點()

獲取邊緣中點的模型位置。

細節

在默認情況下，中點是邊緣標籤中心的位置。這也是中箭頭指向的位置。

爲curve-style: unbundled-bezier如果控制點數爲奇數，則中點爲中間極值。

對於偶數個控制點，中點是兩個最中間控制點相交的地方.例如，這是雙邊對稱或斜對稱邊的中間拐點。

爲curve-style: segments如果分段點數爲奇數，則中點爲中段點。對於偶數段點，整體中點是最中線段的中點(即中間兩個段點的平均值)。

佈局

eles.laying()

別名：eles.createLayout(), eles.makeLayout()

獲取一個新的佈局，該佈局可用於算法地定位集合中的節點。

佈局(備選方案 )

備選方案
佈局選項。

此函數對於在圖中元素的子集上運行佈局非常有用，可能與其他佈局並行。

您必須指定options.name與您希望使用的佈局的名稱。

此函數創建並返回佈局對象。您可能希望爲更高級的應用程序保留對佈局的引用，例如同時運行多個佈局。

請注意，您必須調用layout.run()爲了讓它影響圖形。

實例

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

nodes.layoutPo多()

延拓函數：此函數用於擴展。

爲離散/同步佈局定位節點。

nodes.layoutPo多(佈局, 備選方案, 職能(ELEI) )

佈局
佈局。
備選方案
佈局選項對象。
職能(ELEI)
返回指定節點的新位置的函數。
- 埃勒
  被迭代的節點，函數應該返回要設置的位置。
- i
  當迭代佈局中的節點時，當前節點的索引。

此函數由離散佈局調用，以更新具有新節點位置的圖形。

佈局只負責計算新的節點位置；設置這些位置並執行動畫/修改視圖/更改縮放/等等。由layoutPositions()，由其末尾的每個佈局調用。run()方法。

這，這個，那，那個options對象傳遞給layoutPositions()當由佈局擴展調用並由佈局之間共享的許多公共屬性組成時。

var options = {
animate: false, // whether to animate changes to the layout
animationDuration: 500, // duration of animation in ms, if enabled
animationEasing: undefined, // easing of animation, if enabled
animateFilter: function ( node, i ){ return true; }, // a function that determines whether the node should be animated.
//All nodes animated by default on animate enabled. Non-animated nodes are positioned immediately when the layout starts
eles: someCollection, // collection of elements involved in the layout; set by cy.layout() or eles.layout()
fit: true, // whether to fit the viewport to the graph
padding: 30, // padding to leave between graph and viewport
pan: undefined, // pan the graph to the provided position, given as { x, y }
ready: undefined, // callback for the layoutready event
stop: undefined, // callback for the layoutstop event
spacingFactor: 1, // a positive value which adjusts spacing between nodes (>1 means greater than usual spacing)
transform: function (node, position ){ return position; } // transform a given node position. Useful for changing flow direction in discrete layouts
zoom: undefined // zoom level as a positive number to set after animation
}

注意如果fit中提供的任何值。pan或zoom.

節點.佈局維數()

延拓函數：此函數用於擴展。

返回節點寬度和高度。用於佈局定位中做重疊檢測。

節點.佈局尺寸(備選方案 )

備選方案
佈局選項對象。

此函數用於檢索節點邊框的寬度和高度。計算寬度和高度的方式受傳入的Options對象的影響。

它返回一個對象，該對象包含計算出的邊框的寬度和高度。w和h鑰匙分別。它可以直接替代boundingBox()函數假設w和h需要價值。

var options = {
nodeDimensionsIncludeLabels: true, // Boolean which changes whether label dimensions are included when calculating node dimensions, default true
};
var dims = cy.nodes().first().layoutDimensions( options );

選擇

ele.selected()

獲取元素是否被選中。

eles.select()

使元素被選中(NB，集合之外的其他元素不受影響)。

實例

cy.$('#j').select();

eles.unselect()

別名：eles.deselect()

使元素不被選中(NB，集合之外的其他元素不受影響)。

實例

cy.$('#j').unselect();

ele.selecable()

獲取元素的選擇狀態是否可變。

eles.selectify()

使元素的選擇狀態可變。

實例

cy.$('#j').unselectify();

eles.unselectify()

使元素的選擇狀態不可變。

實例

cy.$('#j').unselectify();

風格

eles.addClass()

向元素添加類。

eles.addClass(班 )

班
要添加到元素中的以空格分隔的類名列表。

實例

cy.$('#j, #e').addClass('foo');

eles.emoveClass()

從元素中刪除類。

eles.emoveClass(班 )

班
要從元素中移除的以空格分隔的類名列表。

實例

cy.$('#j, #e').removeClass('foo');

eles.toggleClass()

切換元素是否具有指定的類。

eles.toggleClass(班級[, [動] )

班
要切換元素的以空格分隔的類名列表。
肘節 [任擇]
與其自動切換，不如在真實值上添加類，或者在Falsey值上刪除類。

實例

切換：

cy.$('#j, #e').toggleClass('foo');

切換：

cy.$('#j, #e').toggleClass('foo', true);

切換：

cy.$('#j, #e').toggleClass('foo', false);

eles.class()

用指定的列表替換元素上的當前類列表。

課程(班 )

班
替換當前類列表的以空格分隔的類名列表。

實例

刪除所有類：

cy.nodes().classes(); // no classes

替換類：

cy.nodes().classes('foo');

eles.flashClass()

將類添加到元素中，然後在指定的持續時間後刪除類。

閃光燈班(班級[, 期間] )

班
要在元素上閃現的以空格分隔的類名列表。
持續時間 [任擇]
應在元素上添加類的持續時間(毫秒)。在持續時間之後，類將被移除。

實例

cy.$('#j, #e').flashClass('foo', 1000);

ele.hasClass()

獲取元素是否具有特定類。

ele.hasClass(類名 )

類名
要測試的類的名稱。

實例

console.log( 'j has class `foo` : '  + cy.$('#j').hasClass('foo') );

Eles.Style()等人

別名：eles.css()

獲取或重寫元素的樣式。

ele.Style()

獲取一個名稱-值對象，該對象包含元素的視覺樣式屬性及其值。

風格(名字，姓名 )

獲取特定的樣式屬性值。

名字，姓名
要獲取的視覺樣式屬性的名稱。

風格(名字，姓名, 價值 )

設置特定的樣式屬性值。

名字，姓名
要設置的視覺樣式屬性的名稱。
價值
要設置的視覺樣式屬性的值。

風格(OBJ )

設置幾個特定的樣式屬性值。

OBJ
要設置的樣式、屬性、名稱和值對的對象。

eles.emoveStyle()

刪除所有樣式重寫。

移除式(人名 )

刪除特定的樣式重寫。

人名
要刪除重寫的以空格分隔的屬性名稱列表。

細節

您應該非常謹慎地使用此函數進行設置，因爲覆蓋元素的樣式，儘管它具有狀態和類。一般來說，最好在初始化時指定一個更好的樣式表來反映您的應用程序狀態，而不是以編程方式修改樣式。

只定義視覺樣式屬性是支持的。

如果要刪除特定重寫的樣式屬性，請設置null或''(空字符串)到它。

ele.renderedStyle()

別名：eles.renderedCss()

獲取呈現維度中元素的樣式。

ele.renderedStyle()

獲取一個名稱-值對象，該對象包含呈現的視覺樣式屬性及其元素的值。

ele.renderedStyle(名字，姓名 )

獲取特定的呈現樣式屬性值。

名字，姓名
要獲取的視覺樣式屬性的名稱。

ele.DigicStyle()

以可用於計算的首選單位獲取樣式屬性的數值。

ele.DigicStyle(名字，姓名 )

名字，姓名
要獲取的樣式屬性的名稱。

細節

大小(例如：width)以像素爲單位。
時間(例如：transition-duration)以毫秒爲單位。
角度(例如：text-rotation)以弧度表示。
普通數字(例如：opacity)是沒有單位的。
顏色(如：background-color)在[r, g, b]數組的值爲[0，255]。
編號清單(例如：edge-distances)在數組中。
百分比範圍在[0，1]上，因此它們對計算有用。
有些屬性不能定義首選單元，例如background-position-x-它可能在px或%例如。像這樣的屬性以元素的樣式(例如樣式表)中指定的單元返回。在這種情況下，可以通過ele.numericStyleUnits().
不能用數字表示的值(例如：label)作爲字符串返回。

實例

node.numericStyle('width')會回來30對於30 px寬節點，即使該節點被指定爲width: 3em.

ele.DigicStyleUnit()

去找那些ele.numericStyle()表示爲某一特定屬性。

ele.DigicStyleUnit(名字，姓名 )

名字，姓名
要獲取的樣式屬性的名稱。

ele.visual()等人

獲取元素是否可見(即display: element和visibility: visible).

ele.visual()

獲取元素是否可見。

ele.hid()

獲取元素是否隱藏。

ele.EfficitiveOpacity()

獲取元素的有效不透明度(即屏幕上的不透明度)，其中考慮到父節點的不透明度。

透明()

獲取元素的有效不透明度是否完全透明，這考慮到父節點的不透明度。

動畫

ele.動畫片()

獲取元素當前是否處於動畫狀態。

eles.activate()

動畫元素。

有生命的(備選方案 )

備選方案
包含動畫細節的對象。
- 位置
  元素將被動畫化的位置。
- 渲染位置
  一個渲染的位置，其中元素將被動畫化。
- 風格
  包含要動畫的樣式屬性的名稱-值對的對象。
- 持續時間
  動畫的持續時間(毫秒)。
- 排隊
  指示是否對動畫進行排隊的布爾值。
- 完全
  動畫完成後要調用的函數。
- 步進
  每次動畫步驟調用的函數。
- 放鬆
  A transition-timing-function放鬆風格的字符串，塑造動畫的進度曲線。

細節

請注意，您只能指定position和renderedPosition：您不能同時動畫到兩個位置。

實例

cy.nodes().animate({
position: { x: 100, y: 100 },
style: { backgroundColor: 'red' }
}, {
duration: 1000
});
console.log('Animating nodes...');

ele.動畫()

得到一個動畫因爲元素。

電子動畫(備選方案 )

備選方案
包含動畫細節的對象。
- 位置
  元素將被動畫化的位置。
- 渲染位置
  一個渲染的位置，其中元素將被動畫化。
- 風格
  包含要動畫的樣式屬性的名稱-值對的對象。
- 持續時間
  動畫的持續時間(毫秒)。
- 放鬆
  A transition-timing-function放鬆風格的字符串，塑造動畫的進度曲線。

延遲()

添加元素動畫之間的延遲。

延遲(持續時間, 完全 )

持續時間
延遲的時間應該以毫秒爲單位。
完全
延遲完成時要調用的函數。

實例

cy.nodes()
.animate({
style: { 'background-color': 'blue' }
}, {
duration: 1000
})
.delay( 1000 )
.animate({
style: { 'background-color': 'yellow' }
})
;
console.log('Animating nodes...');

ele.delay動畫()

延遲動畫因爲元素。

延遲動畫(持續時間 )

持續時間
延遲的時間應該以毫秒爲單位。

停()

停止當前正在運行的所有動畫。

埃爾斯，停下(清場, JumpToEnd )

清場
一個布爾值，指示是否應該清空動畫隊列。
JumpToEnd
一個布爾值，指示當前運行的動畫是否應該跳到它們的末端，而不是中途停止。

實例

cy.nodes().animate({
style: { 'background-color': 'cyan' }
}, {
duration: 5000,
complete: function(){
console.log('Animation complete');
}
});
console.log('Animating nodes...');
setTimeout(function(){
console.log('Stopping nodes animation');
cy.nodes().stop();
}, 2500);

eles.ClearQueue()

刪除元素的所有排隊動畫。

比較

eles.ame()

確定此集合是否包含與其他集合完全相同的元素。

相同(埃爾斯 )

埃爾斯
與之相比的其他元素。

實例

var heavies = cy.$('node[weight > 60]');
var guys = cy.$('#j, #g, #k');
console.log( 'same ? ' + heavies.same(guys) );

eles.anySame()

確定此集合是否包含與其他集合相同的任何元素。

總之.埃爾斯 )

埃爾斯
與之相比的其他元素。

實例

var j = cy.$('#j');
var guys = cy.$('#j, #g, #k');
console.log( 'any same ? ' + j.anySame(guys) );

eles.收納()

別名：eles.has()

確定此集合是否包含其他集合的所有元素。

包括(埃爾斯 )

埃爾斯
與之相比的其他元素。

實例

cy.$('#j, #e').contains( cy.$('#j') ); // true

El.AreNeighbors()

別名：eles.allAreNeighbours()

確定指定集合中的所有元素是否位於調用集合的鄰近區域。

所有鄰居(埃爾斯 )

埃爾斯
與之相比的其他元素。

實例

var j = cy.$('#j');
var gAndK = cy.$('#g, #k');
console.log( 'all neighbours ? ' + j.allAreNeighbors(gAndK) );

eles.is()

確定此集合中的任何元素是否與選擇器匹配。

埃利斯選擇器 )

選擇器
要匹配的選擇器。

實例

var j = cy.$('#j');
console.log( 'j has weight > 50 ? ' + j.is('[weight > 50]') );

eles.allAre()

確定集合中的所有元素是否匹配選擇器。

所有.Are(選擇器 )

選擇器
要匹配的選擇器。

實例

var jAndE = cy.$('#j, #e');
console.log( 'j and e all have weight > 50 ? ' + jAndE.allAre('[weight > 50]') );

一些()

確定此集合中的任何元素是否滿足指定的測試函數。

一些(職能(ele，i，eles)[, [醫] )

職能(ele，i，eles)
測試函數，它返回滿足測試的元素的真實值和不滿足測試的元素的Falsey值。
- 埃勒
  當前元素。
- i
  當前元素的索引。
- 埃爾斯
  正在測試的元素集合。
這藝術品 [任擇]
對.的價值this在測試函數中。

實例

var jAndE = cy.$('#j, #e');
var someHeavierThan50 = jAndE.some(function( ele ){
return ele.data('weight') > 50;
});
console.log( 'some heavier than 50 ? ' + someHeavierThan50 );

每個人()

確定此集合中的所有元素是否滿足指定的測試函數。

每個人(職能(ele，i，eles)[, [醫] )

職能(ele，i，eles)
測試函數，它返回滿足測試的元素的真實值和不滿足測試的元素的Falsey值。
- 埃勒
  當前元素。
- i
  當前元素的索引。
- 埃爾斯
  正在測試的元素集合。
這藝術品 [任擇]
對.的價值this在測試函數中。

實例

var jAndE = cy.$('#j, #e');
var everyHeavierThan50 = jAndE.every(function( ele ){
return ele.data('weight') > 50;
});
console.log( 'every heavier than 50 ? ' + everyHeavierThan50 );

迭代法

eles.size()

獲取集合中的元素數。

細節

請注意，作爲另一種選擇，您可以閱讀eles.length而不是eles.size()。兩者是可以互換的。

eles.space()等人

獲取集合是否爲空，這意味着它沒有元素。

eles.space()

獲取集合是否爲空。

eles.non()

獲取集合是否爲非空集合。

eles.forEach()

別名：eles.each()

迭代集合中的元素。

爲了每個人職能(ele，i，eles)[, [醫] )

職能(ele，i，eles)
該函數執行每次迭代。
- 埃勒
  當前元素。
- i
  當前元素的索引。
- 埃爾斯
  正在迭代的元素集合。
這藝術品 [任擇]
對.的價值this在迭代函數中。

細節

這個函數的行爲類似於Array.prototype.forEach()爲了方便起見，略作改動：

可以通過返回提前退出迭代。false在迭代函數中。這，這個，那，那個Array.prototype.forEach()實現不支持這一點，但由於其實用性，它還是包括在內。

實例

// print all the ids of the nodes in the graph
cy.nodes().forEach(function( ele ){
console.log( ele.id() );
});

eles.eq()等人

在集合中的特定索引處獲取元素。

eles.eq(指數 )

指數
要獲取的元素的索引。

eles.first()

獲取集合中的第一個元素。

eles.last()

獲取集合中的最後一個元素。

細節

你可以用eles[i]代替eles.eq(i)作爲一種更有表現力的選擇。

eles.片()

根據指定的索引獲取集合中元素的子集。

切片([開始][, 終點站] )

啓動 [任擇]
指定從何處開始選擇的整數。第一個元素的索引爲0。使用負數從數組的末尾進行選擇。
端部 [任擇]
指定選擇的結束位置的整數。如果省略，將選擇從起始位置到數組末尾的所有元素。使用負數從數組的末尾進行選擇。

eles.toArray()

將集合作爲數組，保持元素的順序。

建築過濾

eles.getElementById()

別名：eles.$id()

以非常出色的方式從集合中獲取其ID中的元素。

eles.getElementById(ID )

ID
要獲取的元素的ID。

Eles.Union()

別名：eles.add(), eles.or(), eles['u'](), eles['+'](), eles['|']()

獲取一個新集合，這是由於使用另一個集合添加集合而產生的。

工會(埃爾斯 )

埃爾斯
要添加的元素。

工會(選擇器 )

選擇器
添加與此選擇器匹配的圖中的元素。

實例

收藏：

var j = cy.$('#j');
var e = cy.$('#e');
j.union(e);

帶有選擇器：

cy.$('#j').union('#e');

eles.Difference()

別名：eles.not(), eles.subtract(), eles.relativeComplement(), eles['\\'](), eles['!'](), eles['-']()

獲取一個新集合，這是由於集合中沒有指定的元素。

差異(埃爾斯 )

埃爾斯
將不在結果集合中的元素。

差異(選擇器 )

選擇器
與此選擇器匹配的調用集合中的元素將不在結果集合中。

實例

收藏：

var j = cy.$('#j');
var nodes = cy.nodes();
nodes.difference(j);

帶有選擇器：

cy.nodes().difference('#j');

絕對補()

別名：eles.abscomp(), eles.complement()

獲取圖中沒有在調用集合中的所有元素。

實例

cy.$('#j').absoluteComplement();

eles.交()

別名：eles.intersect(), eles.and(), eles['n'](), eles['&'](), eles['.']()

獲取此集合和另一個指定集合中的元素。

埃利斯交叉口(埃爾斯 )

埃爾斯
要與之相交的元素。

埃利斯交叉口(選擇器 )

選擇器
表示要與之相交的元素的選擇器。圖中與選擇器匹配的所有元素都用作傳遞的集合。

實例

var jNhd = cy.$('#j').neighborhood();
var eNhd = cy.$('#e').neighborhood();
jNhd.intersection( eNhd );

eles.symmeticicDifferDiffence()

別名：eles.symdiff(), eles.xor(), eles['^'](), eles['(+)'](), eles['(-)']()

獲取調用集合或傳遞的集合中的元素，但兩者都不能。

等.對稱差分(埃爾斯 )

埃爾斯
要應用對稱差分的元素。

等.對稱差分(選擇器 )

選擇器
表示要應用對稱差異的元素的選擇器。圖中與選擇器匹配的所有元素都用作傳遞的集合。

實例

cy.$('#j, #e, #k').symdiff('#j, #g');

eles.diff()

在這兩個集合上執行傳統的左/右差異。

eles.diff(埃爾斯 )

埃爾斯
右邊的元素。

eles.diff(選擇器 )

選擇器
表示diff右側元素的選擇器。圖中與選擇器匹配的所有元素都用作傳遞的集合。

細節

此函數返回窗體的普通對象。{ left, right, both }哪裏

left是僅在調用(即左)集合中的元素集合，
right是僅在傳遞的(即右)集合中的元素集，以及
both兩個集合中的元素集。

實例

var diff = cy.$('#j, #e, #k').diff('#j, #g');
var getNodeId = function( n ){ return n.id() };
console.log( 'left: ' + diff.left.map( getNodeId ).join(', ') );
console.log( 'right: ' + diff.right.map( getNodeId ).join(', ') );
console.log( 'both: ' + diff.both.map( getNodeId ).join(', ') );

eles.Merge()

在調用集合中執行給定元素的就地合併。

合併(埃爾斯 )

埃爾斯
要就地合併的元素。

合併(選擇器 )

選擇器
表示要合併的元素的選擇器。圖中與選擇器匹配的所有元素都用作傳遞的集合。

細節

此函數修改調用集合，而不是返回新集合。在某些情況下，應考慮使用這一職能，但在其他情況下應避免使用這一職能。考慮使用eles.union()相反。

僅在您自己創建的新集合上使用此函數，使用cy.collection()。這可以確保您不會無意中修改另一個集合。

實例

收藏：

var col = cy.collection(); // new, empty collection
var j = cy.$('#j');
var e = cy.$('#e');
col.merge( j ).merge( e );

帶有選擇器：

var col = cy.collection(); // new, empty collection
col.merge('#j').merge('#e');

eles.unMerge()

對調用集合執行就地操作以刪除給定的元素.

展開(埃爾斯 )

埃爾斯
要移除的元素。

展開(選擇器 )

選擇器
表示要刪除的元素的選擇器。圖中與選擇器匹配的所有元素都用作傳遞的集合。

細節

此函數修改調用集合，而不是返回新集合。在某些情況下，應考慮使用這一職能，但在其他情況下應避免使用這一職能。考慮使用eles.filter()或eles.remove()相反。

僅在您自己創建的新集合上使用此函數，使用cy.collection()。這可以確保您不會無意中修改另一個集合。

實例

收藏：

var col = cy.collection(); // new, empty collection
var e = cy.$('#e');
col.merge( cy.nodes() );
col.unmerge( e );

帶有選擇器：

var col = cy.collection(); // new, empty collection
col.merge( cy.nodes() );
col.unmerge('#e');

eles.filter()等人

獲取包含指定篩選函數或選擇器接受的元素的新集合。

過濾器(職能(ele，i，eles)[, [醫] )

職能(ele，i，eles)
Filter函數返回要包含的元素的真實值和要排除的元素的Falsey值。
- 埃勒
  當前元素。
- i
  當前元素的索引。
- 埃爾斯
  正在篩選的元素集合。
這藝術品 [任擇]
對.的價值this在迭代函數中。

過濾器(選擇器 )

獲取與指定選擇器匹配的元素。

選擇器
要匹配的選擇器。

節點(選擇器 )

獲取與指定選擇器匹配的節點。

選擇器
要匹配的選擇器。

邊緣(選擇器 )

獲取與指定選擇器匹配的邊緣。

選擇器
要匹配的選擇器。

實例

帶有選擇器：

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

具有以下功能：

cy.nodes().filter(function( ele ){
return ele.data('weight') > 50;
});

eles.Sort()

獲取一個包含按指定比較函數排序的元素的新集合。

排序(功能(ele1，ele2) )

功能(ele1，ele2)
返回負數的排序比較函數ele1以前ele2，0ele1同ele2，或正數表示ele1後ele2.

實例

按增加權重的順序獲取節點集合：

var nodes = cy.nodes().sort(function( a, b ){
return a.data('weight') - b.data('weight');
});
// show order via animations
var duration = 1000;
nodes.removeStyle().forEach(function( node, i ){
node.delay( i * duration ).animate({
style: {
'border-width': 4,
'border-color': 'green'
}
}, { duration: duration });
});
console.log('Animating nodes to show sorted order');

eles.map()

獲取包含從集合映射的值的數組。

地圖(職能(ele，i，eles)[, [醫] )

職能(ele，i，eles)
返回每個元素的映射值的函數。
- 埃勒
  當前元素。
- i
  當前元素的索引。
- 埃爾斯
  正在映射的元素集合。
這藝術品 [任擇]
對.的價值this在迭代函數中。

實例

獲取節點權重數組：

var weights = cy.nodes().map(function( ele ){
return ele.data('weight');
});
console.log(weights);

減少()

通過對累加器和集合的每個值應用函數來減少單個值。

減少(功能(preVal，ele，i，eles) )

功能(preVal，ele，i，eles)
給定前一個值和當前元素返回累加值的函數。
- 普伐
  從以前的元素中積累的值。
- 埃勒
  當前元素。
- i
  當前元素的索引。
- 埃爾斯
  正在減少的元素集合。

實例

將節點ID連接到逗號分隔的字符串中：

var initialValue = null;
var fn = function( prevVal, ele, i, eles ){
if( prevVal ){
return prevVal + ',' + ele.id();
} else {
return ele.id();
}
};
var ids = cy.nodes().reduce( fn, initialValue );
console.log( ids );

eles.min()

在集合中找到最小值。

埃爾斯明(職能(ele，i，eles)[, [醫] )

職能(ele，i，eles)
返回要對每個元素進行比較的值的函數。
- 埃勒
  當前元素。
- i
  當前元素的索引。
- 埃爾斯
  正在搜索的元素集合。
這藝術品 [任擇]
對.的價值this在迭代函數中。

細節

此函數返回具有以下字段的對象：

value找到的最小值。
ele*對應於最小值的元素。

實例

查找具有最小權重的節點：

var min = cy.nodes().min(function(){
return this.data('weight');
});
console.log( 'min val: ' + min.value + ' for element ' + min.ele.id() );

eles.max()

查找最大值和相應的元素。

eles.max(職能(ele，i，eles)[, [醫] )

職能(ele，i，eles)
返回要對每個元素進行比較的值的函數。
- 埃勒
  當前元素。
- i
  當前元素的索引。
- 埃爾斯
  正在搜索的元素集合。
這藝術品 [任擇]
對.的價值this在迭代函數中。

細節

此函數返回具有以下字段的對象：

value找到的最大值。
ele與最大值相對應的元素。

實例

查找具有最大權重的節點：

var max = cy.nodes().max(function(){
return this.data('weight');
});
console.log( 'max val: ' + max.value + ' for element ' + max.ele.id() );

橫穿

鄰里()等人

找出元素的鄰里。

鄰里([選擇器] )

別名：鄰里()

獲取元素的開放鄰域。

選擇器 [任擇]
用於篩選結果集合的可選擇器。

開放鄰里([選擇器] )

別名：開放鄰里()

獲取元素的開放鄰域。

選擇器 [任擇]
用於篩選結果集合的可選擇器。

親密鄰里關係([選擇器] )

別名：封閉鄰里()

得到元素的封閉鄰域。

選擇器 [任擇]
用於篩選結果集合的可選擇器。

細節

此函數返回的鄰域與“鄰里”的傳統定義略有不同：返回的鄰域包括將集合連接到鄰域的邊緣。這給了你更多的靈活性。

阿開放鄰域是一個不包括原始元素集。如果未指定，則默認打開鄰里。

A 封閉鄰域是一個是嗎？包括原始元素集。

實例

cy.$('#j').neighborhood();

Eles.Components()

獲取連接的組件，只考慮調用集合中的元素。返回一個集合數組，每個集合代表一個組件。

nodes.edgesWith()

獲取將集合連接到另一個集合的邊緣。邊緣的方向並不重要。

edgesWith(埃爾斯 )

埃爾斯
另一個收藏品。

edgesWith(選擇器 )

選擇器
另一個集合，指定爲與圖中所有元素匹配的選擇器。

實例

var j = cy.$('#j');
var e = cy.$('#e');
j.edgesWith(e);

nodes.edgesto()

獲取從集合(即源)到另一個集合(即目標)的邊緣。

結.edgesto(埃爾斯 )

埃爾斯
另一個收藏品。

結.edgesto(選擇器 )

選擇器
另一個集合，指定爲與圖中所有元素匹配的選擇器。

實例

var j = cy.$('#j');
var e = cy.$('#e');
j.edgesTo(e);

edges.connectedNodes()

獲取連接到集合中邊緣的節點。

edges.connectedNodes([選擇器] )

選擇器 [任擇]
用於篩選結果集合的可選擇器。

實例

var je = cy.$('#je');
je.connectedNodes();

nodes.connectedEdges()

獲取連接到集合中節點的邊緣。

連接Edges([選擇器] )

選擇器 [任擇]
用於篩選結果集合的可選擇器。

實例

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

Edge.Source()

獲取此邊緣的源節點。

資料來源：[選擇器] )

選擇器 [任擇]
用於篩選結果集合的可選擇器。

實例

var je = cy.$('#je');
je.source();

edges.source()

獲取連接到集合中邊緣的源節點。

資料來源([選擇器] )

選擇器 [任擇]
用於篩選結果集合的可選擇器。

實例

var edges = cy.$('#je, #kg');
edges.sources();

edge.Target()

獲取此邊緣的目標節點。

邊緣目標([選擇器] )

選擇器 [任擇]
用於篩選結果集合的可選擇器。

實例

var je = cy.$('#je');
je.target();

edges.Target()

獲取連接到集合中邊緣的目標節點。

目標([選擇器] )

選擇器 [任擇]
用於篩選結果集合的可選擇器。

實例

var edges = cy.$('#je, #kg');
edges.targets();

Edges.ParlineEdges()

獲取與集合中的邊緣平行的邊。

邊.平行邊([選擇器] )

選擇器 [任擇]
用於篩選結果集合的可選擇器。

細節

如果將同一兩個節點連接起來，則稱兩個邊是平行的。任何兩個平行邊都可以在相同的方向連接節點，在這種情況下，邊緣共享相同的源和目標。它們可以在相反的方向連接節點，在這種情況下，源和目標在第二邊緣反轉。

實例

cy.$('#je').parallelEdges();

edges.codirectedEdges()

獲取指向集合中的邊緣。

Edges.codirectedEdges([選擇器] )

選擇器 [任擇]
用於篩選結果集合的可選擇器。

細節

如果兩個邊在同一方向上連接相同的兩個節點，則稱兩個邊爲共定向：邊具有相同的源和目標。

實例

cy.$('#je').codirectedEdges(); // only self in this case

nodes.root()

從調用節點集合中，獲取根節點(即沒有傳入邊，如有向無圈圖)。

根莖([選擇器] )

選擇器 [任擇]
用於篩選結果集合的可選擇器。

節葉()

從調用節點集合中，獲取離開的節點(例如，在有向無圈圖中沒有傳出邊)。

節葉([選擇器] )

選擇器 [任擇]
用於篩選結果集合的可選擇器。

節點輸出者()

從集合中的節點獲取邊緣(及其目標)。

節點輸出者([選擇器] )

選擇器 [任擇]
用於篩選結果集合的可選擇器。

實例

使.的出遊者.j:

cy.$('#j').outgoers();

節點接班人()

遞歸地從集合中的節點(即輸出者，輸出者的輸出者，.)中獲取邊緣(及其目標)。

接班人([選擇器] )

選擇器 [任擇]
用於篩選結果集合的可選擇器。

實例

接班人j:

cy.$('#j').successors();

nodes.incomers()

獲取邊緣(及其源)進入集合中的節點。

入境者([選擇器] )

選擇器 [任擇]
用於篩選結果集合的可選擇器。

實例

獲得.的收入j:

cy.$('#j').incomers();

nodes.vers()

遞歸地獲取邊緣(及其源)進入集合中的節點(即輸入者、輸入者的輸入者.)。

節點.前輩([選擇器] )

選擇器 [任擇]
用於篩選結果集合的可選擇器。

實例

前人j:

cy.$('#j').predecessors();

算法

eles.fithFirstSearch()

別名：eles.bfs()

在集合中的元素中執行寬度優先搜索。

eles.fithFirstSearch(備選方案 )

備選方案
- 根部
  要開始搜索的根節點(選擇器或集合)。
- 訪問：功能(v，e，u，i，深度) [任擇]
  在搜索中訪問節點時調用的處理程序函數。處理程序返回true當它找到所需的節點，並返回false取消搜索。
  - v
    當前節點。
  - e
    將前一個節點連接到當前節點的邊緣。
  - u
    前一個節點。
  - i
    指示此節點的索引是第一個已訪問的節點。
  - 深度
    有多少邊緣跳離這個節點是從根節點。
- 定向 [任擇]
  一個布爾值，指示算法是否只應沿邊從一個源到另一個目標(默認)。false).

細節

請注意，此函數只對調用集合中的圖的子集執行寬度優先搜索。

此函數返回一個包含兩個集合的對象({ path: eles, found: node })，搜索找到的節點和搜索的路徑：

如果沒有找到節點，那麼found是空的。
如果處理程序函數返回false，則返回到該點的唯一路徑。
返回的路徑包括邊緣，這樣如果path[i]是一個節點，那麼path[i - 1]用於到達該節點的邊緣。

實例

var bfs = cy.elements().bfs({
roots: '#e',
visit: function(v, e, u, i, depth){
console.log( 'visit ' + v.id() );
// example of finding desired node
if( v.data('weight') > 70 ){
return true;
}
// example of exiting search early
if( v.data('weight') < 0 ){
return false;
}
},
directed: false
});
var path = bfs.path; // path to found node
var found = bfs.found; // found node
// select the path
path.select();

eles.dethFirstSearch()

別名：eles.dfs()

在集合中的元素中執行深度優先搜索。

eles.dethFirstSearch(備選方案 )

備選方案
- 根部
  要開始搜索的根節點(選擇器或集合)。
- 訪問：功能(v，e，u，i，深度) [任擇]
  在搜索中訪問節點時調用的處理程序函數。處理程序返回true當它找到所需的節點，並返回false取消搜索。
  - v
    當前節點。
  - e
    將前一個節點連接到當前節點的邊緣。
  - u
    前一個節點。
  - i
    指示此節點的索引是第一個已訪問的節點。
  - 深度
    有多少邊緣跳離這個節點是從根節點。
- 定向 [任擇]
  一個布爾值，指示算法是否只應沿邊從一個源到另一個目標(默認)。false).

細節

請注意，此函數只對調用集合中的圖形子集執行深度優先搜索。

此函數返回一個包含兩個集合的對象({ path: eles, found: node })，搜索找到的節點和搜索的路徑：

如果沒有找到節點，那麼found是空的。
如果處理程序函數返回false，則返回到該點的唯一路徑。
返回的路徑包括邊緣，這樣如果path[i]是一個節點，那麼path[i - 1]用於到達該節點的邊緣。

實例

var dfs = cy.elements().dfs({
roots: '#e',
visit: function(v, e, u, i, depth){
console.log( 'visit ' + v.id() );
// example of finding desired node
if( v.data('weight') > 70 ){
return true;
}
// example of exiting search early
if( v.data('weight') < 0 ){
return false;
}
},
directed: false
});
var path = dfs.path; // path to found node
var found = dfs.found; // found node
// select the path
path.select();

eles.dijkstra()

對集合中的元素執行Dijkstra的算法。這將從根節點找到集合中所有其他節點的最短路徑。

eles.dijkstra(備選方案 )

備選方案
- 根部
  算法開始的根節點(選擇器或集合)。
- 重量：功能(邊緣) [任擇]
  返回邊的正數權重的函數。
- 定向 [任擇]
  一個布爾值，指示算法是否只應沿邊從一個源到另一個目標(默認)。false).

細節

注意，這個函數只對調用集合中的圖的子集執行Dijkstra的算法。

此函數返回以下形式的對象：

{
distanceTo: function( node ){ /* impl */ }
pathTo: function( node ){ /* impl */ }
}

distanceTo(node)返回從源節點到node，和pathTo(node)返回包含從源節點到node。路徑從源節點開始，幷包括路徑中節點之間的邊緣，這樣如果pathTo(node)[i]是一種邊緣，那麼pathTo(node)[i-1]是路徑中的前一個節點，並且pathTo(node)[i+1]是路徑中的下一個節點。

如果沒有定義權函數，則對每條邊使用1的常量權重。

實例

var dijkstra = cy.elements().dijkstra('#e', function(edge){
return edge.data('weight');
});
var pathToJ = dijkstra.pathTo( cy.$('#j') );
var distToJ = dijkstra.distanceTo( cy.$('#j') );

eles.aStar()

對集合中的元素執行A*搜索算法。這將找到從根節點到目標節點的最短路徑。

一顆星(備選方案 )

備選方案
- 根部
  搜索開始的根節點(選擇器或集合)。
- 目標
  搜索結束的目標節點(選擇器或集合)。
- 重量：功能(邊緣) [任擇]
  返回邊的正數權重的函數。
- 啓發式：函數(節點) [任擇]
  在從當前節點到目標的最短距離上返回估計(不能過高估計)的函數。
- 定向 [任擇]
  一個布爾值，指示算法是否只應沿邊從一個源到另一個目標(默認)。false).

細節

請注意，此函數只對調用集合中的圖形子集執行A*搜索。

此函數返回以下形式的對象：

{
found, /* true or false */
distance, /* Distance of the shortest path, if found */
path /* Ordered collection of elements in the shortest path, if found */
}

關於任擇方案：

如果沒有定義權函數，則對每條邊使用1的常量權重。
如果不提供啓發式函數，則將使用一個常數空函數，將其轉化爲與Dijkstra算法相同的行爲。除了‘可接受’之外，啓發式應該是單調的(也稱爲一致的)。

實例

var aStar = cy.elements().aStar({ root: "#j", goal: "#e" });
aStar.path.select();

EL.FLOYDWARR()

對集合中的元素執行弗洛伊德·沃爾搜索算法。這就找到了所有節點對之間的最短路徑。

[醫]備選方案 )

備選方案
- 重量：功能(邊緣) [任擇]
  返回邊的正數權重的函數。
- 定向 [任擇]
  一個布爾值，指示算法是否只應沿邊從一個源到另一個目標(默認)。false).

細節

此函數返回以下形式的對象：

{
/* function that computes the shortest path between 2 nodes
(either objects or selector strings) */
path: function( fromNode, toNode ){ /* impl */ },
/* function that computes the shortest distance between 2 nodes
(either objects or selector strings) */
distance: function( fromNode, toNode ){ /* impl */ }
}

如果沒有定義權函數，則對每條邊使用1的常量權重。

實例

var fw = cy.elements().floydWarshall();
fw.path('#k', '#g').select();

貝爾曼福特()

對集合中的元素執行Bellman-Ford搜索算法。這將找到從起始節點到集合中所有其他節點的最短路徑。

貝爾曼福特備選方案 )

備選方案
- 根部
  搜索開始的根節點(選擇器或集合)。
- 重量：功能(邊緣) [任擇]
  返回邊的正數權重的函數。
- 定向 [任擇]
  一個布爾值，指示算法是否只應沿邊從一個源到另一個目標(默認)。false).

細節

此函數返回以下形式的對象：

{
/* function that computes the shortest path from root node to the argument node
(either objects or selector string) */
pathTo: function(node){ /* impl */ },
/* function that computes the shortest distance from root node to argument node
(either objects or selector string) */
distanceTo: function(node){ /* impl */ },
/* true/false. If true, pathTo and distanceTo will be undefined */
hasNegativeWeightCycle
}

如果沒有定義權函數，則對每條邊使用1的常量權重。

Bellman-Ford算法能很好地檢測負權週期，但如果發現負權週期，則不能返回路徑或距離結果。

實例

var bf = cy.elements().bellmanFord({ root: "#j" });
bf.pathTo('#g').select();

eles.kruskal()

對集合中的元素執行Kruskal算法，返回最小生成樹，假設無向邊。

埃爾斯庫斯卡爾[函數(邊)] )

功能(邊) [任擇]
返回邊的正數權重的函數。

細節

注意，這個函數在調用集合中的圖形子集上運行Kruskal的算法。

實例

cy.elements().kruskal();

eles.kargerStein()

使用Karger-Stein算法在圖中找到最小割集。得到的最優結果具有較高的概率，但沒有保證。

細節

此函數返回以下形式的對象：

{
cut, /* Collection of edges that are in the cut */
partition1, /* Collection of nodes that are in the first partition */
partition2 /* Collection of nodes that are in the second partition */
}

實例

var ks = cy.elements().kargerStein();
ks.cut.select();

eles.pageRank()

使用PageRank算法對集合中的節點進行排序。

eles.pageRank(備選方案 )

備選方案
- 溼因子 [任擇]
  算法的數值參數。
- 精密度 [任擇]
  表示所需精度的數值參數。
- 迭代 [任擇]
  要執行的最大迭代次數。

細節

此函數返回以下形式的對象：

{
/* function that computes the rank of a given node (either object or selector string) */
rank: function( node ){ /* impl */ }
}

實例

var pr = cy.elements().pageRank();
console.log('g rank: ' + pr.rank('#g'));

學位中心性()

別名：eles.dc()

只考慮調用集合中的元素，計算指定根節點的程度集中度。

學位中心(備選方案 )

備選方案
- 根部
  進行中心度計算的根節點(選擇器或集合)。
- 重量：功能(邊緣) [任擇]
  返回邊緣權重的函數。
- 阿爾法 [任擇]
  中心度計算的α值，範圍爲[0，1]。對於值0(默認)，忽略邊緣權重，僅在中心性計算中使用邊數。對於值1，忽略邊數，僅在中心度計算中使用邊權值。
- 定向 [任擇]
  指示是否計算有向索引樹和度中心性的布爾值(true)或者是否計算了無向中心性(false，默認)。

細節

爲options.directed: false，此函數返回以下形式的對象：

{
degree /* the degree centrality of the root node */
}

爲options.directed: true，此函數返回以下形式的對象：

{
indegree, /* the indegree centrality of the root node */
outdegree /* the outdegree centrality of the root node */
}

實例

console.log( 'dc of j: ' + cy.$().dc({ root: '#j' }).degree );

Eles.CentralityNormalization()

別名：eles.dcn(), eles.degreeCentralityNormalised()

只考慮調用集合中的元素，計算節點的歸一化程度中心性。

學位中心規範化(備選方案 )

備選方案
- 重量：功能(邊緣) [任擇]
  返回邊緣權重的函數。
- 阿爾法 [任擇]
  中心度計算的α值，範圍爲[0，1]。對於值0(默認)，忽略邊緣權重，僅在中心性計算中使用邊數。對於值1，忽略邊數，僅在中心度計算中使用邊權值。
- 定向 [任擇]
  指示是否計算有向索引樹和度中心性的布爾值(true)或者是否計算了無向中心性(false，默認)。

細節

爲options.directed: false，此函數返回以下形式的對象：

{
/* the normalised degree centrality of the specified node */
degree: function( node ){ /* impl */ }
}

爲options.directed: true，此函數返回以下形式的對象：

{
/* the normalised indegree centrality of the specified node */
indegree: function( node ){ /* impl */ },
/* the normalised outdegree centrality of the specified node */
outdegree: function( node ){ /* impl */ }
}

實例

var dcn = cy.$().dcn();
console.log( 'dcn of j: ' + dcn.degree('#j') );

El.ClosenessCentrality()

別名：eles.cc()

只考慮調用集合中的元素，計算指定根節點的封閉中心性。

近中心性(備選方案 )

備選方案
- 根部
  進行中心度計算的根節點(選擇器或集合)。
- 重量：功能(邊緣) [任擇]
  返回邊緣權重的函數。
- 定向 [任擇]
  一種布爾值，指示算法是否以有向方式從源操作到目標(true)或者算法是否以無定向的方式工作(false，默認)。
- 諧波 [任擇]
  指示算法是否計算諧波平均值的布爾值(true)或算術平均數(false)距離。調和均值對於不強連通的圖是非常有用的。

細節

此函數直接返回指定根節點的數值封閉中心值。

實例

console.log( 'cc of j: ' + cy.$().cc({ root: '#j' }) );

El.ClosenessCentralityNormalization()

別名：eles.ccn(), eles.closenessCentralityNormalised()

只考慮調用集合中的元素，計算節點的緊密性中心性。

近距離中心標準化(備選方案 )

備選方案
- 重量：功能(邊緣) [任擇]
  返回邊緣權重的函數。
- 定向 [任擇]
  一種布爾值，指示算法是否以有向方式從源操作到目標(true)或者算法是否以無定向的方式工作(false，默認)。
- 諧波 [任擇]
  指示算法是否計算諧波平均值的布爾值(true)或算術平均數(false)距離。調和均值對於不強連通的圖是非常有用的。

細節

此函數返回窗體的一個對象：

{
/* returns the normalised closeness centrality of the specified node */
closeness: function( node ){ /* impl */ }
}

實例

var ccn = cy.$().ccn();
console.log( 'ccn of j: ' + ccn.closeness('#j') );

中間中心性()

別名：eles.bc()

只考慮調用集合中的元素，計算節點之間的中心性。

中間中心性(備選方案 )

備選方案
- 重量：功能(邊緣) [任擇]
  返回邊緣權重的函數。
- 定向 [任擇]
  一種布爾值，指示算法是否以有向方式從源操作到目標(true)或者算法是否以無定向的方式工作(false，默認)。

細節

此函數返回窗體的一個對象：

{
/* returns the betweenness centrality of the specified node */
betweenness: function( node ){ /* impl */ },
/* returns the normalised betweenness centrality of the specified node */
betweennessNormalized: function( node ){ /* impl */ }
/* alias : betweennessNormalised() */
}

實例

var bc = cy.$().bc();
console.log( 'bc of j: ' + bc.betweenness('#j') );

複合節點

這些功能適用於複合圖.

node.isParent()

獲取該節點是否爲複合父節點(即包含一個或多個子節點的節點)。

node.isChilless()

獲取節點是否沒有子節點(即沒有子節點的節點)

node.ischild()

獲取節點是否爲複合子節點(即包含在節點中)。

node.isOrphan()

獲取節點是否是孤立節點(即沒有父節點的節點)。

nodes.parent()

獲取集合中每個節點的複合父節點。

節點.家長([選擇器] )

選擇器 [任擇]
用於篩選結果集合的選擇器。

nodes.祖先()

別名：nodes.parents()

獲取所有複合祖先節點(即父母、父母的父母等)集合中每個節點的。

節.祖先([選擇器] )

選擇器 [任擇]
用於篩選結果集合的選擇器。

nodes.CommonAncestors()

獲取集合中所有節點所共有的所有複合祖先，從最近的節點開始，並逐步向前推進。

普通Ancestors([選擇器] )

選擇器 [任擇]
用於篩選結果集合的選擇器。

細節

你可以通過nodes.commonAncestors().first()最遙遠的路nodes.commonAncestors().last()，因爲一般的祖先都是按親密無間的順序降序的。

節點孤兒()

獲取調用集合中的所有孤立節點(即沒有複合父節點)。

孤兒([選擇器] )

選擇器 [任擇]
用於篩選結果集合的選擇器。

非孤兒()

獲取調用集合中的所有非孤立節點(即有一個複合父節點)。

非孤兒[選擇器] )

選擇器 [任擇]
用於篩選結果集合的選擇器。

nodes.child()

獲取集合中每個節點的所有複合子節點(即直接後代)。

兒童([選擇器] )

選擇器 [任擇]
用於篩選結果集合的選擇器。

nodes.後人()

獲得所有複合後代(即兒童、兒童子女等)集合中每個節點的節點。

節點後裔([選擇器] )

選擇器 [任擇]
用於篩選結果集合的選擇器。

節點兄弟()

獲取集合中每個節點的所有同級節點(即相同的複合父節點)。

兄弟姐妹([選擇器] )

選擇器 [任擇]
用於篩選結果集合的選擇器。

選擇器

備註及注意事項

選擇器的功能類似於DOM元素上的CSS選擇器，而Cytoscape.js中的選擇器則用於圖形元素的集合。請注意，無論在何處可以指定選擇器作爲函數的參數，eles.filter()-樣式過濾器功能可以用來代替選擇器。例如：

cy.$('#j').neighborhood(function( ele ){
return ele.isEdge();
});

可以將選擇器組合在一起，在Cytoscape.js中進行強大的查詢，例如：

// get all nodes with weight more than 50 and height strictly less than 180
cy.elements("node[weight >= 50][height < 180]");

選擇器可以用逗號連接在一起(有效地創建邏輯OR)：

// get node j and the edges coming out from it
cy.elements('node#j, edge[source = "j"]');

必須指出，字符串需要用引號括起來：

//cy.filter('node[name = Jerry]'); // this doesn't work
cy.filter('node[name = "Jerry"]'); // but this does

請注意元字符(^$\/()AC.26？+*[]{})。)需要逃脫：

cy.filter('#some\\$funky\\@id');

組、班和ID

node, edge，或*(組選擇器)根據組匹配元素(node對於節點，edge爲了邊緣，*(對所有人而言)。

.className匹配具有指定類的元素(例如，使用.foo一個名爲“foo”的類)。

#id匹配具有匹配ID的元素(例如，#foo是相同的[id = 'foo'])

數據

[name]
如果元素定義了指定的數據屬性，即不匹配，則匹配它們。undefined(如：[foo]獲取名爲“foo”的屬性)。這裏null被認爲是一個已定義的值。

[^name]
如果未定義指定的數據屬性，則匹配元素，即undefined(例如)[^foo])這裏null被認爲是一個已定義的值。

[?name]
如果指定的數據屬性是特魯西價值(如：[?foo]).

[!name]
如果指定的數據屬性是法爾西價值(如：[!foo]).

[name = value]
如果元素的數據屬性與指定值匹配，則匹配元素(例如，[foo = 'bar']或[num = 2]).

[name != value]
如果元素的數據屬性與指定值不匹配，則匹配元素(例如，[foo != 'bar']或[num != 2]).

[name > value]
如果元素的數據屬性大於指定值(例如：[foo > 'bar']或[num > 2]).

[name >= value]
如果元素的數據屬性大於或等於指定的值(例如：[foo >= 'bar']或[num >= 2]).

[name < value]
如果元素的數據屬性小於指定值(例如：[foo < 'bar']或[num < 2]).

[name <= value]
如果元素的數據屬性小於或等於指定的值(例如：[foo <= 'bar']或[num <= 2]).

[name *= value]
如果元素的數據屬性包含指定值作爲子字符串(例如，[foo *= 'bar']).

[name ^= value]
如果元素的數據屬性以指定的值開頭(例如，[foo ^= 'bar']).

[name $= value]
如果元素的數據屬性以指定值結尾，則匹配元素(例如，[foo $= 'bar']).

@(數據屬性操作符修飾符)
優先於運算符，因此不區分大小寫。[foo @$= 'ar'], [foo @>= 'a'], [foo @= 'bar'])

!(數據屬性操作符修飾符)
加在運算符的前面，使它被否定。[foo !$= 'ar'], [foo !>= 'a'])

[[]](元數據括號)
用雙方括號代替正方形來匹配元數據，而不是數據。[[degree > 2]]匹配度大於2的元素)。支持的屬性包括degree, indegree，和outdegree.

邊

->(定向邊緣選擇器)匹配源和目標子選擇器匹配的邊緣。.src -> .tgt)

<->(無向邊緣選擇器)匹配連接節點子選擇器匹配的邊緣。.foo <-> .bar)

複合節點

>(兒童選擇器)
匹配父節點的直接子節點(例如，node > node).

(後代選擇器)
匹配父節點的後代(例如，node node).

$(主題選擇器)
設置選擇器的主題(例如，$node > node若要選擇父節點而不是子節點，請執行以下操作。主題選擇器不能與邊緣選擇器一起使用，因爲邊緣應該是主題。

國家

動畫

:animated：匹配當前正在動畫的元素。
:unanimated：匹配當前未被動畫化的元素。

選擇

:selected*匹配選定的元素。
:unselected：匹配未選中的元素。
:selectable：匹配可選擇的元素。
:unselectable：匹配不可選擇的元素。

鎖緊

:locked*匹配鎖定元素。
:unlocked匹配未鎖定的元素。

風格

:visible匹配可見的元素(即display: element和visibility: visible).
:hidden匹配隱藏的元素(即display: none或visibility: hidden).
:transparent匹配透明的元素(即opacity: 0爲自己或父母)。
:backgrounding：如果元素的背景圖像當前正在加載，則與其匹配。
:nonbackgrounding：如果元素的背景圖像當前未加載，則匹配該元素；即沒有圖像或圖像已經加載)。

用戶交互：

:grabbed：匹配用戶正在抓取的元素。
:free：匹配當前未被用戶抓取的元素。
:grabbable：匹配用戶可抓取的元素。
:ungrabbable：匹配用戶無法抓取的元素。
:active：匹配活動元素(即用戶交互，類似於:active在CSS中)。
:inactive：匹配不活動的元素(即沒有用戶交互)。
:touch：當顯示在基於觸摸的環境中(例如在平板電腦上)時，匹配元素。

進出圖

:removed：匹配已從圖形中刪除的元素。
:inside匹配圖中包含的元素(它們沒有被刪除)。

複合節點

:parent：匹配父節點(它們有一個或多個子節點)。
:childless匹配無子節點(它們有零個子節點)。
:child或:nonorphan匹配子節點(每個節點都有一個父節點)。
:orphan：匹配孤立節點(每個節點都沒有父節點)。

邊

:loop：匹配循環邊緣(與目標源相同)。
:simple*匹配簡單的邊(即在簡約圖，以不同的源爲目標)。

風格

js中的樣式儘可能地遵循CSS約定。在大多數情況下，屬性具有與其對應的CSS名稱相同的名稱和行爲。但是，CSS中的屬性不足以指定圖的某些部分的樣式。在這種情況下，引入了其他屬性，這些屬性是Cytoscape.js特有的。

爲了簡單易用，特異性規則在樣式表中完全被忽略。對於給定元素的給定樣式屬性，最後一次匹配選擇器獲勝。

格式

指定的樣式。初始化可以是函數格式、普通JSON格式或字符串格式-如果要從服務器上提取樣式，則普通JSON格式和字符串格式更有用。

字符串格式

注意，每個屬性的尾隨分號都是強制性的。如果沒有它們，解析肯定會失敗。

示例樣式文件：

/* comments may be entered like this */
node {
background-color: green;
}

初始化時：

cytoscape({
container: document.getElementById('cy'),
// ...
style: 'node { background-color: green; }' // probably previously loaded via ajax rather than hardcoded
// , ...
});

普通JSON格式

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

功能格式

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

你也可以選擇使用css代替style，G..selector( ... ).css( ... )或{ selector: ..., css: ... }.

函數值

在JSON或函數樣式表格式中，可以將函數指定爲樣式屬性的值。以這種方式，樣式值可以通過一個基於每個元素的函數來指定.

在某些情況下，使用函數作爲樣式屬性值可能很方便。然而，它可能不是一個表演性的選擇。因此，如果可能的話，使用緩存可能是值得的，例如使用存檔。_.memoize()功能。

請注意，如果將函數用作樣式值，則無法將樣式表序列化和反序列化爲JSON本身。

例子：

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)'
})
// ...
// , ...
});

屬性類型

顏色可按名稱指定。red)、六角形(例如：#ff0000或#f00)，RGB(例如：rgb(255, 0, 0))，或HSL(例如：hsl(0, 100%, 50%)).
需要一個數字的值，例如長度，可以像素值指定(例如：24px)，隱式以像素爲單位的無單位值(24)，或em值(例如，2em)大小在模型協調，因此屏幕上(呈現的)大小與縮放1處指定的大小相同。
不透明值指定爲0 <= opacity <= 1.
時間是以毫秒或秒爲單位來測量的。
角度是用弧度測量的。3.14rad)或學位(例如。180deg).

地圖繪製者

除了直接指定屬性的值之外，開發人員還可以使用映射器動態地指定屬性值。

如果定義了映射，則要麼爲所有元素定義映射的數據，要麼使用選擇器將映射限制爲已定義映射數據的元素。例如，選擇器[foo]將僅適用於具有數據字段的元素。foo定義。

data()指定到元素的數據字段的直接映射。例如data(descr)將屬性映射到元素的值descr數據中的字段(即ele.data("descr"))這對於映射到像Label文本內容這樣的屬性(content財產)。
mapData()指定到元素的數據字段的線性映射。例如mapData(weight, 0, 100, blue, red)將元素的權重映射到藍色和紅色之間的梯度，以獲得0到100之間的權重。具有ele.data("weight") === 0就會被映射到藍色。其值超出指定範圍的元素映射到極值。在前面的示例中，ele.data("weight") === -1會被映射到藍色。
function( ele ){ ... }函數可以作爲樣式屬性值傳遞。這個函數有一個ele參數，該參數指定計算樣式屬性值的元素。該函數必須爲其相應的選擇器塊應用的所有元素指定相應樣式屬性的有效值。請注意，這些函數雖然方便，但執行起來應該很便宜，理想情況下，應該用LASH‘s之類的東西進行緩存。_.memoize().

節點體

形狀：

width節點體的寬度。此屬性可以接受特定的值。label因此寬度自動基於節點的標籤。
height節點的身體高度。此屬性可以接受特定的值。label因此，高度是根據節點的標籤自動確定的。
shape節點的身體形狀。注意，每個形狀都符合指定的width和height，所以你可能得調整一下width和height如果你想要一個等邊的形狀。width !== height幾個等邊形狀)。只*rectangle形狀是由化合物支持的，因爲化合物的尺寸是由孩子的包圍框定義的。接受下列值：
- ellipse
- triangle
- rectangle
- roundrectangle
- bottomroundrectangle
- cutrectangle
- barrel
- rhomboid
- diamond
- pentagon
- hexagon
- concavehexagon
- heptagon
- octagon
- star
- tag
- vee
- polygon(自定義多邊形指定爲shape-polygon-points).
shape-polygon-points在[-1，1]上以空格分隔的數字列表，表示交替的x值和y值(即x1 y1 x2 y2, x3 y3 ...)這表示節點形狀的多邊形中的點。節點的邊界框由(-1，-1)，(1，-1)，(1，1)，(-1，1)給出。

背景：

background-color節點身體的顏色。
background-blacken：從0到1的值使節點的主體變黑；從0到-1的值使節點的主體變白。
background-opacity節點背景顏色的不透明度級別。

邊界：

border-width節點邊框的大小。
border-style*節點邊框的樣式；可能是solid, dotted, dashed，或double.
border-color節點邊框的顏色。
border-opacity節點邊界的不透明度。

填充物：

填充定義節點維度的加法。例如padding增加節點的外部(即總)寬度和高度。的標籤周圍添加間距。width: label; height: label;節點，也可以用來在複合節點父節點及其子節點之間添加間隔。

padding節點四周的填充量。可以指定百分比或像素值。例如，兩者50%和50px都是可以接受的值。默認情況下，百分比填充計算爲節點寬度的百分比。
padding-relative-to*確定在使用百分比單位的情況下以及僅在使用百分比單位時如何計算填充。接受下面指定的關鍵字之一。
- width：將填充計算爲節點寬度的百分比。
- height：將填充計算爲節點高度的百分比。
- average：將填充計算爲節點寬度和高度平均值的百分比。
- min：將填充計算爲節點寬度和高度的最小值的百分比。
- max：將填充計算爲節點寬度和高度最大值的百分比。

複合母體施膠：

compound-sizing-wrt-labels*是否在調整複合節點的大小時包括後代的標籤；可能是include或exclude.
min-width：指定複合父節點的節點主體的最小(內部)寬度。400px)如果偏袒min-width不要加到100%，那麼偏見就會達到100%。
min-width-bias-left*當複合節點被其放大時min-width，此值指定節點左側額外寬度的百分比(例如：50%).
min-width-bias-right*當複合節點被其放大時min-width，此值指定節點右側額外寬度的百分比(例如，50%).
min-height：指定複合父節點的節點體的最小(內)高度。400px)如果偏袒min-height不要加到100%，那麼偏見就會達到100%。
min-height-bias-top*當複合節點被其放大時min-height，此值指定節點頂部額外寬度的百分比(例如：50%).
min-height-bias-bottom*當複合節點被其放大時min-height，此值指定節點底部額外寬度的百分比(例如：50%).

背景圖像

背景圖像可應用於節點的主體。以下屬性支持具有關聯索引的多個值(空格分隔或數組)。

background-image指向應該用作節點背景的圖像的URL。支持PNG、JPG和SVG格式。
- 您可以使用數據URI使用嵌入式映像，從而保存HTTP請求。
- 可以通過使用空格(空格分隔格式)分隔每個圖像來指定多個背景圖像，但如果使用非字符串樣式表，則首選使用數組。
  - 這些圖像將按照給定的順序應用到節點的主體上，將其中的一個放在另一個上。
  - 當爲多個圖像指定屬性時，如果未提供給定圖像的屬性，則默認值將用作回退。
- SVG圖像注意事項
  - 使用viewbox屬性在SVG圖像中可能會在Firefox中呈現問題。
  - SVG圖像在InternetExplorer中不一致工作。
  - 始終在每個SVG映像中包含此XML頭：
```
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg>
```
  - 使用encodeURIComponent加載SVG數據。
```
var data = 'data:image/svg+xml;utf8,' + encodeURIComponent(svgFile);
```
background-image-crossorigin*所有圖像都帶有crossorigin屬性，該屬性可能是anonymous或use-credentials。默認設置爲anonymous.
background-image-opacity背景圖像的不透明度。
background-width指定圖像的寬度。a%值(例如：50%)可用於設置相對於節點寬度的圖像寬度。如果與background-fit，然後這個值在計算擬合時覆蓋圖像的寬度，從而覆蓋寬高比。這，這個，那，那個auto值在默認情況下使用，該值使用圖像的寬度。
background-height指定圖像的高度。a%值(例如：50%)可用於設置相對於節點高度的圖像高度。如果與background-fit，然後這個值在計算擬合時覆蓋圖像的高度，從而覆蓋寬高比。這，這個，那，那個auto值在默認情況下使用，該值使用圖像的高度。
background-fit背景圖像如何適合節點；可能是none原來的尺寸，contain若要適應節點內部，或cover來覆蓋節點。
background-repeat*是否重複背景圖像；可能是no-repeat, repeat-x, repeat-y，或repeat.
background-position-x背景圖像的x位置，以百分比爲單位(例如，50%)或像素(例如。10px).
background-position-y：背景圖像的y位置，以百分比爲單位(例如，50%)或像素(例如。10px).
background-width-relative-to：更改寬度是相對於節點的寬度計算的，還是相對於填充的寬度計算的；inner或include-padding。如果沒有具體說明，include-padding默認情況下使用。
background-height-relative-to更改高度是相對於節點的高度計算的，還是除填充之外的高度；可能是inner或include-padding。如果沒有具體說明，include-padding默認情況下使用。

以下屬性適用於節點的所有圖像：

background-clip*如何處理背景圖像剪輯；可能是node用於剪裁爲節點形狀或none因爲沒有剪裁。

下面是一個使用JSON的有效背景圖像樣式示例。該示例圖像是通過CreativeCommonsLicense從維基共享網站獲取的。

{
'background-image': [
'https://upload.wikimedia.org/wikipedia/commons/b/b4/High_above_the_Cloud_the_Sun_Stays_the_Same.jpg',
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Pigeon_silhouette_4874.svg/1000px-Pigeon_silhouette_4874.svg.png'
],
'background-fit': 'cover cover',
`background-image-opacity`: 0.5
}

餅圖背景

這些屬性允許您在節點上創建餅圖背景。請注意，每個節點最多支持16個片，因此在屬性中1 <= i <= 16。當然，您必須爲每個屬性指定一個數值，以代替i。每個非零大小的切片按i，從12點開始，順時針方向工作。

您可能會發現，爲樣式表中的所有節點保留一個特定顏色的數字是有用的。然後，您可以爲pie-i-background-size因此，每個節點通過馬佩爾。這將允許您根據元素數據在圖的每個節點中創建顏色一致的餅圖。

pie-size餅的直徑，以節點大小的百分比來衡量。100%)或絕對長度(例如：25px).
pie-i-background-color節點的第一個餅圖切片的顏色。
pie-i-background-size節點的第一個餅圖切片的大小，以百分比來衡量。25%或25).
pie-i-background-opacity節點的第一個餅圖切片的不透明度。

邊緣線

這些屬性會影響邊緣線條的樣式：

width邊緣線的寬度。
curve-style：用於將兩個或多個節點之間的兩個或多個邊分離的彎曲方法；可以是haystack(默認情況下，以非常快的速度捆綁在一起的直邊，其中的環和化合物是不支持的)，bezier(捆綁彎曲的邊)，unbundled-bezier(與手動控制點一起使用的彎曲邊緣)，或segments(一系列直線)。請注意haystack邊最適合ellipse, rectangle，或類似的節點。較小的節點形狀，如triangle，在美學上就不那麼討人喜歡了。還請注意，邊緣箭頭是不支持的。haystack邊緣。
line-color邊緣線條的顏色。
line-style：邊緣線的樣式；可能是solid, dotted，或dashed.

Bezier邊

用於自動綁定的Bezier邊(curve-style: bezier):

control-point-step-size：從源到目標的垂直線，此值指定連續Bezier邊緣之間的距離。
control-point-distance*覆蓋的單個值control-point-step-size有一個人工值。因爲它覆蓋步驟大小，因此具有相同值的Bezier邊將重疊。因此，如果需要的話，最好用它作爲特定邊的一次性值。
control-point-weight一個單一的值，在控制點從源到目標的線上加權。值通常在[0，1]上，0指向源節點，1指向目標節點-但也可以使用更大或更小的值。
edge-distances*有價值intersection(默認)，從源到目標的行control-point-weight從源節點形狀的外部到目標節點形狀的外部。有價值node-position，該行從源位置到目標位置。這，這個，那，那個node-position選項使計算邊緣點更容易，但應該謹慎使用，因爲您可以創建以下無效點：intersection就會自動更正。

環邊

對於循環(即相同的源和目標)：

loop-direction在邊緣的源節點和目標節點相同的情況下，確定從節點延伸的循環角。這個角度是從12點的位置指定的，它順時針方向前進，以增加正數。默認情況是-45deg(向左上角延伸)。
loop-sweep在循環中確定離開和返回邊緣之間的角度。正值導致順時針循環，負值導致逆時針循環.默認值是-90deg.

請注意，循環可能僅爲bezier或unbundled-bezier因爲他們curve-style.

解捆綁Bezier邊

對於帶有手動控制點的Bezier邊(curve-style: unbundled-bezier):

control-point-distances：一系列值，爲每個控制點指定垂直於從源到目標形成的直線的距離。-20 20 -20.
control-point-weights：從源到目標沿一條線加權控制點的一系列值，例如，0.25 0.5 0.75。值通常在[0，1]上，0指向源節點，1指向目標節點-但也可以使用更大或更小的值。
edge-distances*有價值intersection(默認)，從源到目標的行control-point-weights從源節點形狀的外部到目標節點形狀的外部。有價值node-position，該行從源位置到目標位置。這，這個，那，那個node-position選項使計算邊緣點更容易，但應該謹慎使用，因爲您可以創建以下無效點：intersection就會自動更正。

乾草堆邊

環邊和複合父節點不受草堆邊的支持。乾草堆邊緣是一個更好的替代平原，直線邊緣。

用於快速直線邊緣(curve-style: haystack):

haystack-radius一個介於0和1之間的值，表示用於在其連接節點上定位草堆邊緣的相對半徑。節點的外部爲1，中心爲0。

段邊

用於由幾條直線組成的邊(curve-style: segments):

segment-distances一系列值，爲每段指定垂直於從源到目標形成的直線的距離。-20 20 -20.
segment-weights：一系列的值，權重段沿着一條線從一個源點到另一個目標點的值，例如，0.25 0.5 0.75。值通常在[0，1]上，0指向源節點，1指向目標節點-但也可以使用更大或更小的值。
edge-distances*有價值intersection(默認)，從源到目標的行segment-weights從源節點形狀的外部到目標節點形狀的外部。有價值node-position，該行從源位置到目標位置。這，這個，那，那個node-position選項使計算邊緣點更容易，但應該謹慎使用，因爲您可以創建以下無效點：intersection就會自動更正。

邊緣箭頭

<pos>-arrow-color邊緣源箭頭的顏色。
<pos>-arrow-shape邊緣源箭頭的形狀；可能是：
- triangle
- triangle-tee
- triangle-cross
- triangle-backcurve
- vee
- tee
- square
- circle
- diamond
- none
<pos>-arrow-fill邊緣源箭頭的填充狀態；可能爲filled或hollow.
arrow-scale箭頭大小的縮放；可以是任意數字>=0。

對於上面的每個邊箭頭屬性，替換<pos>其中之一

source指向邊緣末端的源節點。
mid-source指向邊緣中部的源節點。
target指向邊緣末端的目標節點。
mid-target指向邊緣中間的目標節點。

只有中間箭頭支持在乾草堆邊緣。

邊緣端點

source-endpoint & target-endpoint：分別指定邊緣的源側和邊緣的目標側的端點。關於如何設置這些屬性，有幾個選項：

可以使用特殊的命名值。
- outside-to-node(默認)表示應自動放置邊緣以指向節點的位置，並將其放置在節點形狀的外部。
- inside-to-node指示邊緣應該一直在節點內部，並直接指向節點的位置。這與指定0 0.
- outside-to-line指示邊緣端點應放置在節點形狀之外，它將從源位置到目標位置的假想線相交。此值對於自動避免Bezier邊的無效情況非常有用，特別是對於複合節點。
兩個數字可以指定端點。數字表示相對於源節點位置的位置。這些數字可以指定爲百分比值(例如：50%，它們分別相對於節點的寬度和高度)或作爲絕對距離(例如。100px或2em).
單角度值(例如：90deg或1.57rad)可以指定端點應放置在由具有指定角度的節點位置形成的線與節點形狀相交的位置。角度從12點開始，順時針方向推進。

邊緣的端點可以從源節點和目標節點移開：

source-distance-from-node：將邊緣從源節點移開的值(默認值)0px).
target-distance-from-node：將邊緣從目標節點移開的值(默認值)0px).

不支持端點修改。curve-style: haystack因爲性能方面的原因。

能見度

display*是否顯示元素；可能是element用於顯示或none因爲沒有顯示。
- A display: none元素不佔用空間。
  - A display: none捆綁的Bezier邊不會佔用其捆綁空間。
  - A display: none節點隱藏其連接的邊緣。
- A display: none元素不具有交互性。
visibility*元素是否可見；可能是visible或hidden.
- A visibility: hidden元素佔用空間。
  - A visibility: hidden捆綁的Bezier邊確實佔用了它的捆綁空間。
  - A visibility: hidden節點不隱藏其連接的邊緣。
- A visibility: hidden元素不具有交互性。
opacity元素的不透明度，範圍從0到1。注意，複合節點父節點的不透明度會影響其子節點的有效不透明度。
- 阿opacity: 0元素佔用空間。
  - 阿opacity: 0捆綁的Bezier邊確實佔用了它的捆綁空間。
  - 阿opacity: 0節點不隱藏其連接的邊緣。
- 阿opacity: 0元素是交互式的。
z-index影響元素的相對繪製順序的整數值。一般來說，具有較高值的元素z-index將繪製在具有較低值的元素的頂部。z-index。請注意，儘管邊緣位於節點下面z-index，除非必要時爲複合節點。

元素是根據複合深度(從低到高)、元素類型(通常是邊緣上方的節點)和z-索引(從低到高)按特定順序繪製的。這些樣式影響排序：

z-compound-depth*可能是bottom, orphan, auto(缺省)，或top。第一張抽籤是bottom，第二個是orphan，它的深度與複合圖的根相同，後面是默認的auto它從複合圖的根到葉按深度順序繪製。最後一張抽籤是top.
z-index-compare*可能是auto(違約)或manual。這，這個，那，那個auto設置在節點下面繪製邊緣，而manual忽略此約定，並僅基於z-index價值。
z-index影響元素的相對繪製順序的整數值。一般來說，具有較高值的元素z-index將繪製在具有較低值的元素的頂部。z-index在同一深度內。

事件

events事件是否應該發生在元素上(例如：tap, mouseover等)；可能是yes或no。爲no元素不接收任何事件，而事件只是傳遞到核心/視圖端口。這，這個，那，那個events屬性是每個元素，因此複合父元素的值不會影響其子元素。
text-events如果標籤接收到事件，是否應該在元素上發生事件；可能是yes或no。您可能需要將樣式應用於:active所以你知道短信是可以激活的。

疊置

這些屬性允許在節點或邊緣頂部創建覆蓋，並且經常用於:active狀態。

overlay-color：覆蓋層的顏色。
overlay-padding顯示覆蓋的元素的外部區域。
overlay-opacity覆蓋層的不透明度。

鬼

鬼屬性允許創建一個鬼影效果，一個在偏移量處繪製的元素的半透明覆制。

ghost*是否使用鬼效應；可能是yes或no.
ghost-offset-x用於定位鬼效果的水平偏移量。
ghost-offset-y用於定位鬼效果的垂直偏移量。
ghost-opacity幽靈效應的不透明性。

過渡動畫

transition-property：要在此狀態下動畫的樣式屬性的逗號分隔列表。
transition-duration過渡時間(以秒爲單位)。0.5s).
transition-delay延遲的長度(以秒爲單位)，在過渡發生之前。250ms).
transition-timing-function*控制動畫進度曲線的寬鬆功能；可能是下列值之一。一個形象化地役權作爲參考。
- linear(違約)，
- spring( tension, friction )()演示具有參數值的詳細信息)，
- cubic-bezier( x1, y1, x2, y2 )()演示具有參數值的詳細信息)，
- ease,
- ease-in,
- ease-out,
- ease-in-out,
- ease-in-sine,
- ease-out-sine,
- ease-in-out-sine,
- ease-in-quad,
- ease-out-quad,
- ease-in-out-quad,
- ease-in-cubic,
- ease-out-cubic,
- ease-in-out-cubic,
- ease-in-quart,
- ease-out-quart,
- ease-in-out-quart,
- ease-in-quint,
- ease-out-quint,
- ease-in-out-quint,
- ease-in-expo,
- ease-out-expo,
- ease-in-out-expo,
- ease-in-circ,
- ease-out-circ,
- ease-in-out-circ.

岩心

這些屬性影響圖形的UI全局，並且只適用於核心。你可以用特殊的core選擇器字符串來設置這些屬性。

指標：

active-bg-color當用戶抓取背景時所顯示的指示器的顏色。
active-bg-opacity活動背景指示器的不透明度。
active-bg-size活動背景指示器的大小。

選擇框：

selection-box-color用於拖動選擇的選擇框的背景顏色。
selection-box-border-color*選擇框邊框的顏色。
selection-box-border-width*選擇框上邊框的大小。
selection-box-opacity*選擇框的不透明度。

視口手勢的紋理：

outside-texture-bg-color：視口紋理外區域的顏色initOptions.textureOnViewport === true.
outside-texture-bg-opacity視口紋理外區域的不透明度。

事件

事件對象

傳遞給處理程序回調的事件類似於jQuery事件對象它們包裝本地事件對象，模仿它們的API。

字段：

cy：對相應核心實例的引用
target*指示首先導致事件的元素或核心
type事件類型字符串(例如，"tap")
namespace事件命名空間字符串(例如，"foo"爲"tap.foo")
timeStamp*Unix時代事件時間，以毫秒爲單位

僅用於用戶輸入設備事件的字段：

position*指示事件的模型位置
renderedPosition*指示事件的呈現位置
originalEvent*原始用戶輸入設備事件對象

僅用於佈局事件的字段：

layout：指示觸發事件的相應佈局(同時運行多個佈局時有用)

事件冒泡

元素上發生的所有事件都會冒泡到複合親本然後到核心。在綁定到內核時，必須考慮到這一點，以便區分發生在後臺的事件和發生在元素上的事件。使用eventObj.target字段，該字段指示事件的發起人(即eventObj.target === cy || eventObj.target === someEle).

用戶輸入設備事件

這些是可以通過Cytoscape.js綁定到的普通瀏覽器事件。可以將這些事件綁定到核心和集合。

mousedown*當鼠標按下按鈕時
mouseup*當鼠標按鈕被釋放時
click*之後mousedown然後mouseup
mouseover*當光標放在目標的頂部時
mouseout*光標從目標移出時
mousemove*當光標移動到目標頂部的某個位置時
touchstart*當一個或多個手指開始觸摸屏幕時
touchmove*當一個或多個手指在屏幕上移動時
touchend*當一個或多個手指從屏幕上移除時

還有一些更高級別的事件，您可以使用，這樣您就不必綁定到不同的事件爲鼠標輸入設備和觸摸設備。

tapstart或vmousedown*正常化的點擊啓動事件(或者mousedown或touchstart)
tapdrag或vmousemove*正常移動事件(任一種)touchmove或mousemove)
tapdragover*元素事件的規範化(touchmove或mousemove/mouseover)
tapdragout*元素事件的規範化(touchmove或mousemove/mouseout)
tapend或vmouseup*標準化的點擊結束事件(要麼mouseup或touchend)
tap或vclick*標準化的TAP事件(要麼click，或touchstart緊隨其後touchend無touchmove)
taphold*標準化的龍頭舉行活動
cxttapstart正規化右擊鼠標或雙指tapstart
cxttapend*規範化右擊mouseup或者兩指tapend
cxttap正規化右擊或雙指tap
cxtdrag：正常化後的摩絲表情或雙指拖拽cxttapstart但在此之前cxttapend
cxtdragover*當遍歷節點時cxtdrag
cxtdragout*當離開節點時cxtdrag
boxstart*選擇啓動框時
boxend*選擇結束框時
boxselect*選定框時在元素上觸發
box*打開框內的元素時觸發boxend

集合事件

這些事件自定義爲Cytoscape.js。可以將這些事件綁定到集合中。

add*將元素添加到圖中時
remove*從圖形中移除元素時
select*選擇元素時
unselect*當一個元素未被選中時
lock*當一個元素被鎖定時
unlock*當一個元素被解鎖時
grabon*當一個元素被直接抓取時(只包括光標下的一個節點或用戶的手指)
grab*抓取元素時(包括將被拖動的所有元素)
drag*當一個元素被抓取並移動時
free*當一個元素被釋放時(即不被抓取)
position*當一個元素改變位置時
data*元素的數據更改時
scratch*當元素的便籤數據被更改時
style*元素的樣式更改時
background*當加載節點的背景圖像時

圖事件

這些事件自定義爲Cytoscape.js，它們發生在覈心上。

layoutstart當佈局開始運行時
layoutready當佈局設置了所有節點的初始位置(但可能不是最終位置)
layoutstop當佈局完全運行或停止運行時
ready*當一個新的Cytoscape.js實例準備好與
destroy*當Cytoscape.js實例通過調用顯式銷燬時.destroy().
render*當呈現視圖(Re)時
pan當視口被平移時
zoom當視口放大時
viewport*當視圖被更改時(即從pan..zoom，或在縮放某一點(例如，按一下縮放)時，兩者都會放大)
resize當調整視口大小時(通常通過調用cy.resize()..window調整或切換Cytoscape.js div上的類)

佈局

佈局的功能是在圖中的節點上設置位置。佈局是擴展對於Cytoscape.js，任何人都可以在不修改庫本身的情況下編寫佈局。

默認情況下，Cytoscape.js包含了幾個佈局，它們的選項將在後面指定的默認值部分中描述。請注意，您必須設置options.name指定要運行的佈局的名稱。

每個佈局都有自己的算法來設置每個節點的位置。該算法影響圖的整體形狀和邊的長度。佈局的算法可以通過設置其選項來定製。因此，可以通過適當設置佈局選項來控制邊緣長度。

對於以力爲導向的(物理)佈局，通常有一個選項來設置每個邊的權重以影響相對邊緣長度。邊緣長度也可能受到諸如間距因子、角度和避免重疊等選項的影響。設置邊緣長度取決於特定的佈局，一些佈局將允許比其他佈局更精確的邊緣長度。

零

這，這個，那，那個null佈局將所有節點放置在(0，0)。它對於調試非常有用。

備選方案

var options = {
name: 'null',
ready: function(){}, // on layoutready
stop: function(){} // on layoutstop
};
cy.layout( options );

隨機

這，這個，那，那個random佈局將節點置於視圖端口內的任意位置。

備選方案

var options = {
name: 'random',
fit: true, // whether to fit to viewport
padding: 30, // fit padding
boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
animate: false, // whether to transition the node positions
animationDuration: 500, // duration of animation in ms if enabled
animationEasing: undefined, // easing of animation if enabled
animateFilter: function ( node, i ){ return true; }, // a function that determines whether the node should be animated. All nodes animated by default on animate enabled. Non-animated nodes are positioned immediately when the layout starts
ready: undefined, // callback on layoutready
stop: undefined, // callback on layoutstop
transform: function (node, position ){ return position; } // transform a given node position. Useful for changing flow direction in discrete layouts
};
cy.layout( options );

預置

這，這個，那，那個preset佈局將節點放在您手動指定的位置上。

備選方案

var options = {
name: 'preset',
positions: undefined, // map of (node id) => (position obj); or function(node){ return somPos; }
zoom: undefined, // the zoom level to set (prob want fit = false if set)
pan: undefined, // the pan level to set (prob want fit = false if set)
fit: true, // whether to fit to viewport
padding: 30, // padding on fit
animate: false, // whether to transition the node positions
animationDuration: 500, // duration of animation in ms if enabled
animationEasing: undefined, // easing of animation if enabled
animateFilter: function ( node, i ){ return true; }, // a function that determines whether the node should be animated. All nodes animated by default on animate enabled. Non-animated nodes are positioned immediately when the layout starts
ready: undefined, // callback on layoutready
stop: undefined, // callback on layoutstop
transform: function (node, position ){ return position; } // transform a given node position. Useful for changing flow direction in discrete layouts
};
cy.layout( options );

格網

這，這個，那，那個grid佈局將節點放置在間隔良好的網格中。

備選方案

var options = {
name: 'grid',
fit: true, // whether to fit the viewport to the graph
padding: 30, // padding used on fit
boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
avoidOverlapPadding: 10, // extra spacing around nodes when avoidOverlap: true
nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm
spacingFactor: undefined, // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up
condense: false, // uses all available space on false, uses minimal space on true
rows: undefined, // force num of rows in the grid
cols: undefined, // force num of columns in the grid
position: function( node ){}, // returns { row, col } for element
sort: undefined, // a sorting function to order the nodes; e.g. function(a, b){ return a.data('weight') - b.data('weight') }
animate: false, // whether to transition the node positions
animationDuration: 500, // duration of animation in ms if enabled
animationEasing: undefined, // easing of animation if enabled
animateFilter: function ( node, i ){ return true; }, // a function that determines whether the node should be animated. All nodes animated by default on animate enabled. Non-animated nodes are positioned immediately when the layout starts
ready: undefined, // callback on layoutready
stop: undefined, // callback on layoutstop
transform: function (node, position ){ return position; } // transform a given node position. Useful for changing flow direction in discrete layouts
};
cy.layout( options );

圓

這，這個，那，那個circle佈局將節點放置在一個圓圈中。

備選方案

var options = {
name: 'circle',
fit: true, // whether to fit the viewport to the graph
padding: 30, // the padding on fit
boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
avoidOverlap: true, // prevents node overlap, may overflow boundingBox and radius if not enough space
nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm
spacingFactor: undefined, // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up
radius: undefined, // the radius of the circle
startAngle: 3 / 2 * Math.PI, // where nodes start in radians
sweep: undefined, // how many radians should be between the first and last node (defaults to full circle)
clockwise: true, // whether the layout should go clockwise (true) or counterclockwise/anticlockwise (false)
sort: undefined, // a sorting function to order the nodes; e.g. function(a, b){ return a.data('weight') - b.data('weight') }
animate: false, // whether to transition the node positions
animationDuration: 500, // duration of animation in ms if enabled
animationEasing: undefined, // easing of animation if enabled
animateFilter: function ( node, i ){ return true; }, // a function that determines whether the node should be animated. All nodes animated by default on animate enabled. Non-animated nodes are positioned immediately when the layout starts
ready: undefined, // callback on layoutready
stop: undefined, // callback on layoutstop
transform: function (node, position ){ return position; } // transform a given node position. Useful for changing flow direction in discrete layouts
};
cy.layout( options );

同心

這，這個，那，那個concentric佈局將節點定位在同心圓中，基於您指定的將節點分隔到級別的度量。此佈局設置concentric價值ele.scratch().

備選方案

var options = {
name: 'concentric',
fit: true, // whether to fit the viewport to the graph
padding: 30, // the padding on fit
startAngle: 3 / 2 * Math.PI, // where nodes start in radians
sweep: undefined, // how many radians should be between the first and last node (defaults to full circle)
clockwise: true, // whether the layout should go clockwise (true) or counterclockwise/anticlockwise (false)
equidistant: false, // whether levels have an equal radial distance betwen them, may cause bounding box overflow
minNodeSpacing: 10, // min spacing between outside of nodes (used for radius adjustment)
boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm
height: undefined, // height of layout area (overrides container height)
width: undefined, // width of layout area (overrides container width)
spacingFactor: undefined, // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up
concentric: function( node ){ // returns numeric value for each node, placing higher nodes in levels towards the centre
return node.degree();
},
levelWidth: function( nodes ){ // the letiation of concentric values in each level
return nodes.maxDegree() / 4;
},
animate: false, // whether to transition the node positions
animationDuration: 500, // duration of animation in ms if enabled
animationEasing: undefined, // easing of animation if enabled
animateFilter: function ( node, i ){ return true; }, // a function that determines whether the node should be animated. All nodes animated by default on animate enabled. Non-animated nodes are positioned immediately when the layout starts
ready: undefined, // callback on layoutready
stop: undefined, // callback on layoutstop
transform: function (node, position ){ return position; } // transform a given node position. Useful for changing flow direction in discrete layouts
};
cy.layout( options );

麪包頭

這，這個，那，那個breadthfirst佈局將節點置於層次結構中，基於圖的廣度遍歷。

備選方案

var options = {
name: 'breadthfirst',
fit: true, // whether to fit the viewport to the graph
directed: false, // whether the tree is directed downwards (or edges can point in any direction if false)
padding: 30, // padding on fit
circle: false, // put depths in concentric circles if true, put depths top down if false
spacingFactor: 1.75, // positive spacing factor, larger => more space between nodes (N.B. n/a if causes overlap)
boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm
roots: undefined, // the roots of the trees
maximalAdjustments: 0, // how many times to try to position the nodes in a maximal way (i.e. no backtracking)
animate: false, // whether to transition the node positions
animationDuration: 500, // duration of animation in ms if enabled
animationEasing: undefined, // easing of animation if enabled,
animateFilter: function ( node, i ){ return true; }, // a function that determines whether the node should be animated. All nodes animated by default on animate enabled. Non-animated nodes are positioned immediately when the layout starts
ready: undefined, // callback on layoutready
stop: undefined, // callback on layoutstop
transform: function (node, position ){ return position; } // transform a given node position. Useful for changing flow direction in discrete layouts
};
cy.layout( options );

柯斯

這，這個，那，那個cose(複合彈簧嵌入器)佈局使用物理模擬來繪製圖表。它適用於非複合圖，並具有較好的支持複合圖的附加邏輯。

它是由哈克作爲2013年穀歌代碼之夏的一部分(導師：Max Franz，Christian Lope，Anders Riutta，維吾爾族Dogrusoz)。

基於本文“無向複合圖的佈局算法”維吾爾族Dogrusoz、Erhan Giral、Ahmet Cetintas、Ali Civil ril和Emek Demir著。

這，這個，那，那個cose佈局速度快，效果好。這，這個，那，那個cose-bilkent擴展是算法的一種進化，它在計算上花費更多，但卻產生了近乎完美的結果。

備選方案

var options = {
name: 'cose',
// Called on `layoutready`
ready: function(){},
// Called on `layoutstop`
stop: function(){},
// Whether to animate while running the layout
// true : Animate continuously as the layout is running
// false : Just show the end result
// 'end' : Animate with the end result, from the initial positions to the end positions
animate: true,
// Easing of the animation for animate:'end'
animationEasing: undefined,
// The duration of the animation for animate:'end'
animationDuration: undefined,
// A function that determines whether the node should be animated
// All nodes animated by default on animate enabled
// Non-animated nodes are positioned immediately when the layout starts
animateFilter: function ( node, i ){ return true; },
// The layout animates only after this many milliseconds for animate:true
// (prevents flashing on fast runs)
animationThreshold: 250,
// Number of iterations between consecutive screen positions update
// (0 -> only updated on the end)
refresh: 20,
// Whether to fit the network view after when done
fit: true,
// Padding on fit
padding: 30,
// Constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
boundingBox: undefined,
// Excludes the label when calculating node bounding boxes for the layout algorithm
nodeDimensionsIncludeLabels: false,
// Randomize the initial positions of the nodes (true) or use existing positions (false)
randomize: false,
// Extra spacing between components in non-compound graphs
componentSpacing: 40,
// Node repulsion (non overlapping) multiplier
nodeRepulsion: function( node ){ return 2048; },
// Node repulsion (overlapping) multiplier
nodeOverlap: 4,
// Ideal edge (non nested) length
idealEdgeLength: function( edge ){ return 32; },
// Divisor to compute edge forces
edgeElasticity: function( edge ){ return 32; },
// Nesting factor (multiplier) to compute ideal edge length for nested edges
nestingFactor: 1.2,
// Gravity force (constant)
gravity: 1,
// Maximum number of iterations to perform
numIter: 1000,
// Initial temperature (maximum node displacement)
initialTemp: 1000,
// Cooling factor (how the temperature is reduced between consecutive iterations
coolingFactor: 0.99,
// Lower temperature threshold (below this point the layout will end)
minTemp: 1.0,
// Pass a reference to weaver to use threads for calculations
weaver: false
};
cy.layout( options );

佈局操縱

佈局有一套可用的功能，這允許比主要的運行一次佈局時使用更復雜的行爲。一個新的開發人員可訪問的佈局可以通過cy.layout().

layout.run()

別名：layout.start()

開始運行佈局。

細節

如果佈局是異步的(即連續的)，那麼調用layout.run()簡單地開始佈局。同步(即離散)佈局在完成之前layout.run()退貨。每當佈局啓動時，layoutstart事件被髮出。

佈局將發出layoutstop事件已完成或以其他方式停止時(例如，通過調用layout.stop())開發人員可以綁定到layoutstop使用layout.on()或者使用回調適當地設置佈局選項。

實例

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

停止()

停止運行(異步/離散)佈局。

細節

呼叫layout.stop()停止異步(連續)佈局。如果您想要過早地停止運行的佈局，它是有用的。

實例

var layout = cy.layout({ name: 'cose' });
layout.run();
// some time later...
setTimeout(function(){
layout.stop();
}, 100);

佈局事件

布圖.on()

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

綁定到由佈局發出的事件。

佈置圖.on(事件[, 數據], 功能(事件) )

事件
以空格分隔的事件名稱列表。
數據 [任擇]
在事件對象參數中傳遞給處理程序的普通對象。
功能(事件)
當其中一個指定事件發生時調用的處理程序函數。
- 事件
  事件對象。

行文()

別名：layout.pon()

獲取與佈局上發出的任何指定事件中的第一個事件一起解析的承諾。

佈置圖承諾(事件 )

事件
以空格分隔的事件名稱列表。

實例

var layout = cy.layout({ name: 'random' });
layout.pon('layoutstop').then(function( event ){
console.log('layoutstop promise fulfilled');
});
layout.run();

佈局。

綁定到由佈局發出的事件，並只運行處理程序一次。

佈局。一(事件[, 數據], 功能(事件) )

事件
以空格分隔的事件名稱列表。
數據 [任擇]
在事件對象參數中傳遞給處理程序的普通對象。
功能(事件)
當其中一個指定事件發生時調用的處理程序函數。
- 事件
  事件對象。

layout.emoveListener()

別名：layout.off(), layout.unbind(), layout.unlisten()

刪除佈局上的事件處理程序。

layout.emoveListener(事件[, 處理程序] )

事件
以空格分隔的事件名稱列表。
處理程序 [任擇]
要刪除的處理程序函數的引用。

layout.emit()

別名：layout.trigger()

在佈局上發出一個或多個事件。

佈局。發出(事件[, [外] )

事件
要發出的事件名稱的空格分隔列表。
外系 [任擇]
傳遞給處理程序的附加參數數組。

動畫

動畫表示單個元素在一段時間內狀態的明顯變化。動畫可以通過cy.animation()(用於視口上的動畫)和ele.animation()(用於圖形元素上的動畫)。

動畫操縱

ani.play()

請求從下一幀開始播放動畫。如果動畫完成，則從一開始就重新啓動。

實例

var jAni = cy.$('#j').animation({
style: {
'background-color': 'red',
'width': 75
},
duration: 1000
});
jAni.play();

ani.play()

獲取動畫當前是否正在播放。

ani.process()等人

獲取或設置動畫的發展方向。

ani.process()

將動畫的進度按百分比計算。

進展(進展 )

將動畫的進度設置爲百分比。

進展
要設置爲動畫的進度百分比(即0到1(包括在內)。

ani.time()

獲取動畫的進度，以毫秒爲單位。

ani.time(時間 )

設置動畫的進度，以毫秒爲單位。

時間
設置爲動畫的以毫秒爲單位的進度(即0到包含的持續時間)。

逆流()

將動畫倒帶到開頭。

快速前進()

把動畫快到最後。

實例

var jAni = cy.$('#j').animation({
style: {
'background-color': 'red',
'width': 75
},
duration: 1000
});
// set animation to 50% and then play
jAni.progress(0.5).play();

ani.put()

暫停動畫，保持當前進度。

實例

var j = cy.$('#j');
var jAni = j.animation({
style: {
'background-color': 'red',
'width': 75
},
duration: 1000
});
jAni.play();
// pause about midway
setTimeout(function(){
jAni.pause();
}, 500);

ani.top()

停止動畫，維護當前進度，並從任何相關隊列中刪除動畫。

細節

在不想再運行動畫的情況下，這個函數很有用。呼叫ani.stop()類似於調用ele.stop()因爲動畫不再排隊。

呼叫ani.stop()通過減少動畫的數量來檢查每個幀的每個元素，從而使動畫幀更快。你應該打電話ani.stop()當你想清理動畫時，特別是在有很多動畫的情況下。您仍然可以重用已停止的動畫，但是沒有停止的動畫不能被垃圾收集，除非它的相關目標(即元素或核心實例)也是垃圾收集的。

實例

var j = cy.$('#j');
var jAni = j.animation({
style: {
'background-color': 'red',
'width': 75
},
duration: 1000
});
jAni.play();
// stop about midway
setTimeout(function(){
jAni.stop();
}, 500);

已完成()

別名：ani.complete()

獲取動畫是否已經進展到最後。

ani.application()

在當前進度中應用動畫。

細節

此函數允許您在暫停動畫時直接執行動畫的特定進度。

實例

var jAni = cy.$('#j').animation({
style: {
'background-color': 'red',
'width': 75
},
duration: 1000
});
jAni.progress(0.5).apply();

應用()

獲取動畫當前是否正在應用。

ani.back()

反轉動畫，使其開始條件和結束條件被逆轉。

實例

var jAni = cy.$('#j').animation({
style: {
'background-color': 'red',
'width': 75
},
duration: 1000
});
jAni
.play() // start
.promise('completed').then(function(){ // on next completed
jAni
.reverse() // switch animation direction
.rewind() // optional but makes intent clear
.play() // start again
;
})
;

承諾()

獲取使用指定動畫事件實現的承諾。

承諾()

得到下一次兌現的承諾completed事件。

承諾動畫事件 )

獲取使用指定動畫事件實現的承諾。

動畫事件
事件名稱的字符串；completed或complete用於完成動畫或frame用於下一幀動畫。

實例

什麼時候ani.apply()更新了元素樣式：

var jAni = cy.$('#j').animation({
style: {
'background-color': 'red',
'width': 75
},
duration: 1000
});
jAni.progress(0.5).apply().promise('frame').then(function(){
console.log('j has now has its style at 50% of the animation');
});

什麼時候ani.play()已完成：

var jAni = cy.$('#j').animation({
style: {
height: 60
},
duration: 1000
});
jAni.play().promise().then(function(){
console.log('animation done');
});

建築

js使用帶有核心API的事件驅動模型。核心有幾個擴展，每個擴展都由核心根據需要通知事件。擴展修改圖形中的元素，並將任何更改通知核心。

客戶端應用程序僅通過岩心。除了客戶機希望編寫自己的自定義擴展之外，客戶端不直接訪問擴展。

下面的圖表總結了Cytoscape.js的擴展，並將進一步詳細討論本文檔的其他部分.

使用Cytoscape.js製作的Cytoscape.js體系結構的圖表

擴展

您可以使用分機(例如：cy-ext)如下：cytoscape.use():

cytoscape.use( require('cy-ext') );

使用import，上述例子如下：

import ext from 'cy-ext';
cytoscape.use( ext );

下面的擴展是一個管理列表。爲了增加你的分機，請提交請求這包括您的擴展名URL和一行描述。

表示一個第三方擴展，一個由與CytoscapaConsortium關聯的組維護的擴展。

表示第三方擴展，由外部開發人員維護.

UI擴展

automove：根據指定的規則自動更新節點位置(例如同步節點移動、約束移動等)
autopan-on-drag：當節點被拖出視口邊界時，自動平移視圖端口。
canvas：一種擴展，用於在賽多角圖形上或下面創建畫布。用於定製節點/邊緣、繪圖背景等。
cerebralweb實現基於亞細胞定位或其他自定義註釋的分子交互網絡的快速交互可視化。
context-menus*傳統的右擊菜單
cxtmenu一個循環上下文菜單，允許在圖形上進行一次滑動命令。
edge-bend-editing：編輯邊緣彎曲的用戶界面(段邊和貝塞爾邊)
edge-editation：向節點添加句柄，並允許創建不同類型的邊緣。
edgehandles：UI，用於將節點與邊緣連接。
expand-collapse：提供用於展開和摺疊複合父節點的API。
grid-guide*增加網格和抓取功能到胞景圖中
navigator圖中的鳥瞰小部件。
node-html-label允許將HTML指定爲節點的標籤。
node-resize：具有傳統UI的高度可定製的節點調整擴展。
noderesize*極簡式節點調整大小控制。
panzoom一個泛縮放UI小部件。
popper*包裝Popper.js，這使您可以相對於Cytosscape元素定位div(可用於蒂皮·傑斯若要創建工具提示，請執行以下操作。
qtip一個包裝器，允許您在圖形元素或圖形背景上使用QTips。
snap-to-grid：在Cytoscape.js圖形中添加快速網格和網格線。
supportimages*支持Cytoscape.js上的圖像。
toolbar允許用戶創建一個自定義工具欄，以添加到Cytosscape核心實例的旁邊。

佈局擴展

arbor喬木物理模擬佈局。這是一個基本的物理佈局。
cola：Cola.js物理模擬佈局。可樂做出了漂亮的佈局效果，它的動畫非常流暢，它有很大的選擇來控制佈局。
cose-bilkent由Bilkent設計的Cose佈局和增強的複合節點佈局。Cose Bilkent給出了近乎完美的結果.但是，它比Cytoscape.js中直接包含的Cose版本更昂貴。
dagreDAG和樹木的Dagre佈局。
euler歐拉是一個快速，小文件大小，高質量的力導向(物理模擬)佈局.它適用於非複合圖，對複合圖有基本的支持.
klay：Klay是一種適用於大多數圖形類型的佈局。它對普通圖給出了很好的結果，並很好地處理了DAG和複合圖。
ngraph.forcelayout在平面圖上工作得特別好的物理模擬佈局。比較快。
polywas：GWAS(全基因組關聯研究)數據的佈局說明了位點間的關係。
spread快速擴展物理模擬佈局。它嘗試使用所有的視口空間，但可以配置爲產生更嚴格的結果。它最初使用Frchterman-Reingold，在傳播階段使用Gansner和North。
springy彈性物理模擬佈局。這是一個基本的物理佈局。

API擴展

clipboard：將複製粘貼實用程序添加到Cytoscape.js
graphml*向Cytoscape.js添加GraphML導入和導出功能
undo-redo：向Cytoscape.js添加撤銷-重做API
view-utilities：向Cytoscape.js添加搜索和突出顯示API

API

若要註冊分機，請撥打以下電話：cytoscape( type, name, extension );

價值type可以採用以下值：

'core'*擴展添加了一個核心函數。
'collection'該擴展添加了一個集合函數。
'layout'*擴展註冊一個佈局原型。
'renderer'*擴展程序註冊了渲染器原型。

這，這個，那，那個name參數指示擴展名。例如cytoscape( 'collection', 'fooBar', function(){ return 'baz'; } )寄存器eles.fooBar().

自振式

的確有。一個針對Cytoscape.js的貧民窟項目以便爲您自動生成新擴展的完整項目支架。通過遵循包含的說明，您可以輕鬆地創建組織良好、易於維護和發佈的Cytoscape.js擴展。

性能

背景

您可能會注意到，對於具有大量元素的圖，性能開始下降。發生這種情況有幾個原因：

性能是圖大小的函數，因此性能隨着元素數的增加而降低。
Cytoscape.js支持的豐富的視覺樣式可能很昂貴。只畫圓圈和直線是便宜的，但繪製複雜的圖形就不那麼便宜了。
邊緣渲染特別昂貴。隨着對Bezier曲線邊的需求，多個圖變得更加昂貴。
呈現(位圖)畫布的性能取決於它需要呈現的區域。因此，增加像素比(如在高密度顯示器中，比如在iPad上)會降低渲染性能。

優化

通過按重要性降序調整選項，您可以從Cytoscape.js中獲得更好的性能：

使用cy.getElementById()*cy.getElementById('foo')函數是通過ID獲取元素的最快方法。你可以用cy.$id('foo')輸入更少。按選擇器進行搜索通常意味着您必須檢查集合中的每個元素，而使用查找表時獲得ID的速度要快得多。單個ID選擇器(例如，cy.$('#foo'))被優化爲也使用查找表，但它確實增加了解析的成本。
批處理元件修改*使用cy.batch()同時修改多個元素。
動畫：沒有動畫，你會得到更好的表現。如果仍然使用動畫：
- eles.flashClass()比流暢的動畫更便宜。
- 嘗試限制並發動畫元素的數量。
- 在樣式中使用轉換動畫時，請確保transition-property僅爲要動畫的狀態定義。如果你有transition-property在默認狀態下定義的動畫將嘗試更頻繁地運行，而不是將其限制在實際想要動畫的特定狀態。
函數樣式屬性值雖然方便，但函數樣式的屬性值可能很昂貴。因此，如果可能的話，使用緩存可能是值得的，例如使用存檔。_.memoize()功能。如果樣式屬性值是簡單的傳遞或線性映射，請考慮使用data()或mapData()相反。
標籤：繪圖標籤很貴。
- 如果您可以不使用它們，或者在點擊/鼠標切換中顯示它們，您將獲得更好的性能。
- 考慮不要有邊緣標籤。
- 考慮設置min-zoomed-font-size在您的風格，以便當標籤是小的-和很難閱讀無論如何-他們不會呈現。當標籤至少是您設置的大小(即用戶放大)時，它們將是可見的。
- 背景和輪廓增加了渲染標籤的費用。
簡化邊緣樣式：畫邊可能很貴。
- 設置你的邊緣curve-style到haystack在你的樣式表裏。乾草堆邊緣是直線，比渲染要便宜得多。bezier邊緣。這是默認的邊緣樣式。
- 使用實心邊緣。虛線和虛線邊緣的繪製成本要高得多，因此，如果不使用它們，您將獲得更高的性能。
- 邊緣箭頭渲染起來很昂貴，所以如果它們在圖形中沒有任何語義意義，可以考慮不使用它們。
- 帶有箭頭的不透明邊緣比帶有箭頭的半透明邊緣快兩倍以上。
簡化節點樣式：某些節點的樣式可能很昂貴。
- 在某些情況下，背景圖像非常昂貴。最具表現力的背景圖像是不重複的(background-repeat: no-repeat)和非剪裁(background-clip: none)對於簡單的節點形狀(如方形或圓圈)，可以使用background-fit用於縮放和預剪輯圖像以模擬軟件裁剪(例如，用吞嚥所以它是自動的)。代替預剪輯，你可以聰明地使用透明背景的PNG。
- 節點邊框可能有點昂貴，所以您可以嘗試刪除它們，看看它是否對您的用例產生了顯著的影響。
設置較低的像素比*因爲渲染更多像素的成本更高，所以可以設置pixelRatio到1 在初始化選項中以提高密度顯示器上大型圖形的性能。然而，這使得渲染變得不那麼清晰。
複合節點 : 複合節點使樣式計算和渲染更加昂貴。如果圖形不需要複合節點，則可以通過不使用複合父節點來提高性能。
交互過程中隱藏邊緣*設置hideEdgesOnViewport到true在你的初始化選項。這可以通過在PAN、鼠標輪縮放、按一下縮放和節點拖動操作中隱藏邊緣來降低大型圖形的交互性。這個選項只對非常大的圖產生影響。
循環大型實例大型實例可以使用大量內存，主要是由於畫布的使用。重新計算實例將有助於使您的內存使用率低於調用cy.destroy()，因爲您不會增加堆的數量，也不會調用垃圾收集器。
使用紋理變焦和平底鍋*設置textureOnViewport到true在你的初始化選項。這不是重新繪製整個場景，而是在PAN和縮放操作開始時對視口進行紋理緩存，並對其進行操作。使非常大的圖形的平移和縮放變得更平滑。這個選項只對非常大的圖產生影響。渲染器支持更通用的紋理緩存，因此textureOnViewport只有當你真的需要絕對最便宜的選擇時纔有用。

轉自https://blog.csdn.net/qq_38292691/article/details/84455190

Cytoscape.js_關係圖API_文檔

開始

包括Cytoscape.js

初始化

指定基本選項

下一步

岩心

初始化

初始化

初始化選項

非常常用的選項

初始視口狀態

交互選項

呈現選項

圖形處理

細節

實例

細節

實例

細節

實例

實例

細節

實例

細節

實例

細節

事件

實例

實例

實例

實例

實例

視口操縱

細節

實例

細節

實例

細節

實例

細節

實例

細節

實例

實例

實例

細節

實例

實例

實例

實例

實例

細節

實例

實例

實例

細節

細節

動畫

實例

實例

實例

佈局

實例

風格

細節

出口

細節

實例

細節

實例

細節

實例

收藏

圖形處理

細節

實例

細節

實例

細節