图形实例与集合
为了使用Cytoscape.js,架构中有两个部分是程序员必须关注的.js,即 core(图形实例)和 collection(集合)。在Cytoscape.js中, core 是程序员进入库的主要入口点。从 core 开始,程序员可以运行布局、更改视口以及对整个图形执行其他操作。
core 提供了几个函数来访问图形中的元素。这些函数中的每一个都返回一个集合,即图中的一组元素。集合上提供了函数,这些函数允许程序员筛选集合、对集合执行操作、遍历有关集合的图形、获取有关集合中元素的数据等。
(本文仅列举部分常用属性或方法,更齐全的资料请查看官方文档)
选择器
选择器的功能类似于 DOM 元素上的 CSS 选择器,但 Cytoscape.js 中的选择器是在图形元素的集合上工作。请注意,当选择器是一个带参数的函数时,可以使用eles.filter()
样式的过滤函数来代替选择器,例如:
cy.$('#j').neighborhood(function( ele ){
return ele.isEdge();
});
可改写为
let neighborhood = this.cy.$('#b').neighborhood().filter(function( ele ){
return ele.isEdge();
});
选择器可以组合在一起,在 Cytoscape 中进行强大的查询.js,例如:
// 获取所有weight大于50且高度严格小于180的节点
cy.elements("node[weight >= 50][height < 180]");
可以用逗号连接在一起
// 得到节点j和从它出来的边
cy.elements('node#j, edge[source = "j"]');
注意,字符串需要用引号引起来:
cy.filter('node[name = "Jerry"]')
注意,对于id、字段名等,有些字符需要转义
cy.filter('#some\\$funky\\@id');//获取id是some$funky@id的元素
尽量避免使用非字母数字字符作为字段名称和 ID,以保持简单。如果必须对 ID 使用特殊字符,请使用数据选择器而不是 ID 选择器
cy.filter('[id = "some$funky@id"]')
选择器可以使用点表示法访问数组元素和对象属性:
假设有节点:
nodes: [
{
data: {
id: 'o', name:{
first: "Jerry", last: "Foo"} }},
{
data: {
id: 'p', labels: ["Person","Man"]}},
]
访问
cy.elements('node[labels.0 = "Person"]') //获取 data 中 labels 数组第一个元素值为 Person 的节点
cy.elements('node[name.first = "Jerry"]');//获取 data 中 name 对象 first 值为 Jerry 的节点
-
组选择器
node、edge
或 *(group selector)基于group匹配元素节点、边线、所有元素)。cy.$('node') //获取所有节点 cy.$('edge') //获取所有边线 cy.$('*') //获取所有元素 cy.$('*node') //获取所有节点
-
类名选择器
.xxxclassName
匹配具有指定类名的元素 -
ID选择器
#id
匹配指定 ID 的元素 -
数据选择器
cy.$('[name]') //获取定义了name属性的元素(值为null被视为已定义,值为undefined被视为没有定义) cy.$('[^name]') //获取没有定义name属性的元素 cy.$('[?name]') //匹配name属性为真值的元素 cy.$('[!name]') //匹配name属性为假值的元素 cy.$('[name = value]') //匹配name属性值为指定值的元素 cy.$('[name != value]') //匹配name属性值不是指定值的元素 cy.$('[name > value]') //匹配name属性值大于指定值的元素 cy.$('[name >= value]') //匹配name属性值大于等于指定值的元素 cy.$('[name < value]') //匹配name属性值小于指定值的元素 cy.$('[name <= value]') //匹配name属性值小于等于指定值的元素 cy.$('[name *= value]') //匹配name属性值包含指定值作为子字符串的元素 cy.$('[name ^= value]') //匹配name属性值以指定值为开头的元素 cy.$('[name $= value]') //匹配name属性值以指定值为结尾的元素 cy.$('name.0 = value]') //匹配name属性是数组且指定索引处的元素为指定值的元素 cy.$('name.property = value');//匹配name属性是对象且指定key的值为指定值的元素
特殊符号:
-
@:数据属性运算符修饰符,预置到运算符上,使其不区分大小写
cy.elements('node[name.first @= "Jerry"]'); //匹配不区分大小写的字符串 jerry
-
!:数据属性运算符修饰符,附加到运算符,以便对其进行否定
cy.$('[name !$= 'ar']') cy.$('[name !>= 'a']')
-
[[]]
:元数据方括号)使用双方括号代替方括号,以匹配元数据而不是数据(例如degree
,indegree
,outdegree
.)cy.$('[[degree > 2]]')
-
-
复合节点选择器
-
匹配父节点的直接子节点:
node > node
-
匹配父节点的后代节点:
node node
-
(主题选择器)设置选择器的主题(例如
$node > node
以选择父节点而不是子节点)。
-
-
动画选择器
cy.$(':animated') //匹配当前正在进行动画处理的元素。 cy.$(':unanimated') //匹配当前没有在进行动画处理的元素。
-
选择状态选择器
cy.$(':selected') //匹配选定的元素。 cy.$(':unselected') //匹配位选定的元素。 cy.$(':selectable') //匹配可以选择的元素。 cy.$(':unselectable') //匹配不可选择的元素。
-
锁定状态选择器
cy.$(':locked') //匹配锁定的元素。 cy.$(':unlocked') //匹配未锁定的元素。
-
样式选择器
cy.$(':visible') //匹配可见的元素,即display: element 或 visibility: visible cy.$(':hidden') //匹配锁定的元素,即display: none 或 visibility: hidden cy.$(':transparent') //匹配透明的元素,即自己或祖先元素 opacity: 0 cy.$(':backgrounding') //如果元素的背景图像当前正在加载,则匹配该元素。 cy.$(':nonbackgrounding') //如果元素的背景图像当前未加载,则匹配该元素;即没有图像或图像已加载)。
-
用户交互选择器
cy.$(':grabbed') //匹配用户抓取的元素。 cy.$(':free') //匹配用户当前未抓取的元素。 cy.$(':grabbable') //匹配用户可抓取的元素。 cy.$(':ungrabbable') //匹配用户不可抓取的元素。 cy.$(':active') //匹配处于活动状态的元素(即用户交互,类似于 CSS中的:active) cy.$(':inactive') //匹配处于非活动状态(即无用户交互)的元素。 cy.$(':touch') //在基于触摸的环境中显示时(例如在平板电脑上),匹配元素。
-
图表内外状态选择器
cy.$(':removed') //匹配已从图形中删除的元素。 cy.$(':inside') //匹配图形中具有的元素(它们不会被删除)。
-
复合节点
:parent
: 匹配父节点(它们有一个或多个子节点)。:childless
: 匹配无子节点(它们具有零个子节点)。:child
or:nonorphan
: 匹配子节点(它们每个节点都有一个父节点)。:orphan
: 匹配孤立节点(它们每个节点都没有父节点)。:compound
:匹配父节点。还匹配连接到父节点的边(它们每个节点在源节点和目标节点中至少有一个父节点)。
-
边线选择器
:loop
: 匹配循环边线 ( source 和 target 相同的边线).:simple
: 匹配普通边线 (source 和 target 不通的边线).
常用函数
有几种类型可以执行不同的函数,文档中用于表示这些类型的变量名称如下所示:
变量名 | 功能描述 |
---|---|
cy |
核心 |
eles |
一个或多个元素(节点和边)的集合 |
ele |
单个元素(节点或边)的集合 |
nodes |
一个或多个节点的集合 |
node |
单节点的集合 |
edges |
一个或多个边的集合 |
edge |
单边的集合 |
layout |
布局 |
ani |
动画 |
获取指定元素/集合
-
根据 ID 获取元素
cy.getElementById('SOMEID')
-
获取图形中与选择器匹配的元素。
cy.$() //获取所有元素 cy.$("#a") //获取id是a的元素 cy.elements() //获取所有元素 cy.elements('#a') //获取id是a的元素 cy.nodes() //获取所有节点元素 cy.nodes('#a') //获取id是a的节点元素 cy.edges() //获取所有边线元素 cy.edges('#ab') //获取id是ab的边线元素 cy.filter() //获取所有元素 cy.filter('#a')//获取id是a的元素 cy.filter(function(ele, i, eles){ //对于应返回的元素返回 true 的过滤器函数。本例获取id是a的元素 if (ele.id() === 'a') { return true } console.log(ele); //正在考虑过滤的当前元素。 console.log(i); //用于对图中的元素进行迭代的计数器。 console.log(eles); //正在过滤的元素的集合 })
注:
cy.$()
函数充当cy.filter()
的别名,允许您键入较少的字符没有与选择器匹配的元素,则返回空集合。
-
eles.neighborhood()
获取元素的邻域。(节点元素可获取节点的相连边线,但边线元素无法获取边线连接的节点)
// 获取与 d 节点相连的边线与节点的合集 let neighborhood = this.cy.nodes('#d').neighborhood();
-
ele.component()
获取调用元素的连接组件。组件考虑图中的所有元素。
-
edges.connectedNodes()
获取连接到集合中的边的节点。
-
nodes.connectedEdges()
获取连接到集合中节点的边。
-
edge.source()、edges.sources()
获取此边线的源节点、获取集合中的边线的源节点
-
edge.target()、edges.targets()
获取此边线的目标节点、获取集合中的边线的目标节点
视口常用操作、数据
-
cy.container()
获取显示图形的HTML DOM元素。
-
cy.pan()
获取或设置图形的平移位置。
cy.pan() //获取 cy.pan({ //设置 x: 100, y: 100 });
-
cy.panningEnabled()
获取或设置是否启用平移。
cy.panningEnabled() //获取 cy.panningEnabled(false);//设置
-
cy.userPanningEnabled()
获取或设置是否启用用户事件平移(例如,拖动图形背景)。
cy.userPanningEnabled() //获取 cy.userPanningEnabled(false);//设置
-
cy.zoom()
获取或设置图表的缩放级别。
cy.zoom() //获取 cy.zoom(1.5) //设置 //带选项设置 cy.zoom({ level: 0.5, position: { x: 0, y:0}, renderedPosition: { x:200, y:200} })
-
cy.zoomingEnabled()
获取或设置是否启用缩放。
cy.zoomingEnabled() //获取 cy.zoomingEnabled(false) //设置
-
cy.minZoom()
获取或设置最小缩放级别。
-
cy.maxZoom()
获取或设置最大缩放级别。
-
cy.viewport()
在一次调用中设置视口状态(平移和缩放)。
cy.viewport({ zoom: 2, pan: { x: 100, y: 100 } });
-
cy.boxSelectionEnabled()
获取或设置是否启用框选择。如果与平移一起启用,则用户必须按住 Shift、控件、alt 或命令之一才能启动框选择。
-
cy.selectionType()
获取或设置选择类型。“single”选择类型是默认的,点击一个元素会选择该元素并取消选择前一个元素。“additive”选择类型在点击时切换元素的选择状态。
-
cy.width()
获取视口的屏幕宽度(以像素为单位)。
-
cy.height()
获取视口的屏幕高度(以像素为单位)。
-
cy.extent()
获得视口的范围,一个在模型坐标中的边界框,它让你知道什么模型位置在视口中是可见的。
-
cy.autolock()
获取或设置节点是否自动锁定
-
cy.autoungrabify()
获取或设置节点是否自动取消抓取
-
cy.autounselectify()
获取或设置节点是否自动取消选择
-
cy.resize()
强制渲染器重新计算视口边界。
全局常用方法
-
cy.layout()
设置布局
var layout = cy.layout({ name: 'random' }); layout.run();
注:必须调用
layout.run()
布局才会生效 -
cy.style()
获取当前样式对象
更改现有样式
this.cy.nodes().style({ 'background-color':'cyan' })
或
this.cy.style('node { background-color: cyan; }')
添加到现有样式
this.cy.style() .selector('node') .style('background-color', 'cyan') .update() //更新元素,必须包含在结尾
或
this.cy.style() .selector('node') .style({ 'background-color':'cyan' }) .update()
为图形设置全新的样式:
this.cy.style() .resetToDefault() //启动一个新的默认样式表 .selector('node') .style({ 'background-color':'cyan' }) .update()
设置一个全新的样式表(不使用默认样式表作为基础):
this.cy.style() .clear() //在没有默认样式表的情况下开始一个新的样式表 .selector('node') .style({ 'background-color':'cyan' }) .update()
-
cy.data()
读取和写入与图形关联的开发人员定义的数据。(不属于节点或边线的data中的数据)
cy.data() //读取整个data cy.data('keyA') //读取data中keyA的值 cy.data('keyA', 'bbb') //修改keyA的值为'bbb' cy.data({ keyA:'aaa',keyB:'bbb'}) //批量修改data中的键值对
-
eles.on()
监听元素上发生的事件
this.cy.nodes().on('click', (evt) => { console.log(evt) });
元素常用数据、操作方法
-
ele.id()
获取元素ID的快捷方式。
-
eles.data()
读取和写入与元素关联的开发人员定义的数据。(节点或边线中的data)。
cy.edges('#bc').data() //获取全部data cy.edges('#bc').data('id') //获取data中 id 的值 cy.edges('#bc').data('name', '边线bc') //更改data中 name 的值(如果没有name则是添加) cy.edges('#bc').data({ name:'边线bc', weight:10}) //更改(或添加)data中的多个值
-
ele.isNode()
判断元素是否为节点。
-
ele.isEdge()
判断元素是否为边线。
-
edge.isLoop()
判断边缘是否为循环(即相同的源和目标)。
-
edge.isSimple()
判断边缘是否是普通边线(即不同的源和目标)。
-
node.degree( includeLoops )
-
node.degree( includeLoops )
获取节点被边线连接的次数。参数布尔类型,省略或
true
表示获取包含循环边线的计数,false
表示获取不包含循环边线的计数//计数包含循环边线 cy.nodes('#a').degree() cy.nodes('#a').degree(true) //计数不包含循环边线 cy.nodes('#a').degree(false)
-
node.indegree( includeLoops )
获取节点作为边线 target 被连接的次数
-
node.outdegree( includeLoops )
获取节点作为边线 source 被连接的次数
-
nodes().totalDegree( includeLoops )
获取集合中所有节点被边线连接的总次数(相当于总边线数 * 2)
-
nodes.minDegree( includeLoops )
获取集合中所有节点中节点 degree 最小的值
-
nodes.maxDegree( includeLoops )
获取集合中所有节点中节点 degree 最大的值
-
nodes.minIndegree( includeLoops )
获取集合中所有节点中节点 indegree 最小的值
-
nodes.maxIndegree( includeLoops )
获取集合中所有节点中节点 indegree 最大的值
-
nodes.minOutdegree( includeLoops )
获取集合中所有节点中节点 outdegree 最小的值
-
nodes.maxOutdegree( includeLoops )
获取集合中所有节点中节点 outdegree 最大的值
-
-
node.position()
-
node.position()
获取节点的位置对象,如:
{x: 117, y: 100}
-
node.position( dimension )
获取指定位置维度的值。如
node.position( 'y' )
,获取节点 y 轴的位置 -
node.position( dimension, value )
设置指定位置维度的值。
-
node.position( pos )
用一个对象设置位置值
-
-
nodes.shift()
相对于节点原位置移动节点的位置。
cy.nodes('#a, #b').shift('x', 100) //让a、b节点水平移动100px cy.nodes('#a, #b').shift({ x: 100, y: 100}) //让a、b节点水平移动100px,垂直移动100px
-
ele.width()、 ele.height()
获取元素的宽度、高度
-
eles.layout( options )
对集合中的节点设置新的布局
var layout = this.cy.nodes('#j,#k,#l,#m,#n,#o,#p').layout({ name: 'circle', animate: true, avoidOverlap: true, boundingBox: { x1:700, y1:250, x2:900, y2:500 }, }); layout.run(); //必须
-
ele.selected()
判断是否选择了该元素
-
eles.select()
取消选择元素。集合之外的元素不受影响。
-
eles.unselect()
取消选择元素。集合之外的元素不受影响。
修改元素样式常用方法
-
eles.addClass()
向元素添加类名
-
eles.removeClass()
移除元素类名
-
eles.toggleClass()
切换元素是否具有指定的类名。
cy.edges('#ab').toggleClass('hovered') //如果元素有类名hovered,则移除该类名,如果没有,则添加该类名 cy.edges('#ab').toggleClass('hovered',true) //添加类名hovered cy.edges('#ab').toggleClass('hovered',false) //移除类名hovered
-
eles.style()
获取或覆盖元素的样式
-
eles.removeStyle()
删除样式
迭代、构建、过滤常用方法
-
eles.forEach()
循环访问集合中的元素。
eles.forEach( function(ele, i, eles) [, thisArg] ) //ele 当前元素。 //i 当前元素的索引。 //eles 正在迭代的元素的集合。 //thisArg [可选] 迭代函数中的此值。
-
eles.eq( index )
获取集合中特定索引处的元素。
-
eles.sort()
获取包含按指定比较函数排序的元素的新集合。
-
eles.min()
在集合中查找最小值和相应的元素。
eles.min( function(ele, i, eles) [, thisArg] ) //ele 当前元素。 //i 当前元素的索引。 //eles 正在迭代的元素的集合。 //thisArg [可选] 迭代函数中的此值。
此函数返回具有以下字段的对象:
{ value: xxx, //找到的最小值。 ele: xxxEle //对应于最小值的元素。 }
示例:找到边线weight值最小的边线
let weights = this.cy.edges().min(function(ele){ return ele.data('weight'); }) console.log(weights); // {value: 1, ele: Element(1)}
-
eles.max()
查找最大值和相应的元素。