网络图库Cytoscape.js的使用（二）：图表常用操作
图形实例与集合
为了使用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: 匹配无子节点（它们具有零个子节点）。:childor: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()
查找最大值和相应的元素。