开始

本节将向您介绍开始使用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_文档相关推荐

带你看论文丨全局信息对于图网络文档解析的影响
摘要:文档理解着重于从非结构化文档中识别并提取键值对信息,并将其输出为结构化数据.在过往的信息提取中,大多数工作仅仅只关注于提取文本的实体关系,因此并不适用于直接用于文档理解上. 本文分享自华为云社区 ...
从IBM Rational Software Architect设计管理器生成基于图的文档
有关文档生成的更多文章有关该主题的其他文章,请参阅Einar Karlsen的四部分系列文章,内容涉及使用Rational Publishing Engine生成合规性文档."主题包括: ...
由各大企业移除MongoDB，回看关系模型与文档模型之争
作者:陌北有棵树,Java人,架构师社区合伙人! 本月初,macOS 平台的开源包管理系统 Homebrew 宣布 Homebrew-core 将移除 MongoDB 的支持 (详见:https:// ...
银行ATM系统——分析类图及文档
一.图形文档从不同角度出发,可以得出的分析类图有以下两种: 基于类的责任得出的分析类图基于用况驱动得出的分析类图二. 文字说明 1. 类图综述银行ATM分析类类图主要包括实体类,描述了类与类之 ...
html 的基本结构、标签（分类、关系）、文档类型、页面语言、字符集、语义化
结构代码 <!DOCTYPE html> <html><head> <meta charset="UTF-8"><title& ...
相对、绝对、固定定位，以及其层级关系和脱离文档流的影响
定位:一般父级用相对定位,子级用绝对定位 1.相对定位:position:relative 2.绝对定位:position:absolute 3.固定定位:position:fixed 默认stati ...
用c语言编写的99秒表,单片机00到99秒表的课程设计含源程序，仿真图，文档
这是我上个月做的单片机秒表课程设计,这个课程设计是实现00到99秒的一个秒表, 并且有开始和复位功能, 用了一个星期的时间, 附件里面包含秒表的单片机源程序,proteus仿真电路图和课设文档, 都是 ...
银行ATM系统——顺序图及文档
一.图形文档我为设计的ATM系统绘制了五张顺序图:验证密码.查询账户信息.存款.取款.转账. 验证密码: 查询账户信息: 存款: 取款: 转账: 二.文字说明 2.1 顺序图综述顺序图描述了用况图 ...
银行ATM系统——活动图及文档
一.图形文档活动图(activity diagram)是描述动作.动作的执行次序以及动作的输入与输出的图,它由动作结点和边构成. 针对银行ATM系统,我设计了五个主要功能的活动图: 1.验证密码活动 ...