cytoscape.js基础篇
cytoscape.js基础篇
cytoscape.js
Cytoscape.js是⼀个⽤JS编写的开源图库. 您可以使⽤Cytoscape.js进⾏图形分析和可视化展⽰.
Cytoscape.js允许您轻松显⽰操作丰富的交互式图形. 因为Cytoscape.js允许⽤户与图形交互, 并且允许客户端在⽤户事件中挂在钩⼦, 所以Cytoscape.js可以轻松集成到您的应⽤程序中, 特别是因为Cytoscape.js⽀持桌⾯浏览器, 如Chrome, 和移动浏览器, 如iPad. Cytoscape.js包括您期望开箱即⽤的所有⼿势, 包括捏合缩放, 框选择, 平移等等.
包引⽤
npm : npm install cytoscape
bower : bower install cytoscape
jspm : jspm install npm:cytoscape
版本信息
3.5
3.5.4
3.5.3
3.5.2
3.5.1
3.5.0
3.4
…
Citation
To cite Cytoscape.js in a paper, please cite the Oxford Bioinformatics issue:
Cytoscape.js: a graph theory library for visualisation and analysis
Franz M, Lopes CT, Huck G, Dong Y, Sumer O, Bader GD
Bioinformatics (2016) 32 (2): 309-311 first published online September 28, 2015 doi:10.1093/bioinformatics/btv557 (PDF)
PubMed abstract
Funding
Funding for Cytoscape.js and Cytoscape is provided by NRNB (U.S. National Institutes of Health, National Center for Research Resources grant numbers P41 RR031228 and GM103504) and by NIH grants 2R01GM070743 and
1U41HG006623. The following organizations help develop Cytoscape:
ISB | UCSD | MSKCC | Pasteur | Agilent | UCSF | Unilever | Toronto | NCIBI | NRNB
基础篇
cytoscape.js变量描述
速记内容
cy核⼼
eles⼀个或多个元素(节点或边)的集合
ele单个元素的集合(节点或边)
nodes⼀个或多个节点的集合
node单个节点的集合
edges⼀个或多个边的集合
edge单边的集合
layout布局
ani动画
注: 默认情况下，函数会返回对象⾃⾝，以允许链接调⽤，如obj.fn1().fn2().fn3(). 除⾮⽂档说明，否则全部遵循此⽅式.
位置
节点的位置是指其节点的中⼼点位置.
对于位置有⼀个重要的区别: 位置可以是模型位置或渲染位置.
模型位置: 是存储在元素模型中的位置. 尽管变焦和平移发⽣了变化, 但元素的模型位置仍保持不变.
渲染位置: 是相对于容器位置的. 例如, 渲染位置{ x: 100, y: 100 }是指在左上⾓起向右100个像素向下100个像素的位置.
当缩放和平移更改时, 元素的渲染位置会⾃然更改.
Elements JSON
let cy =cytoscape({
// initial viewport state:
zoom:1,// 图表的初始缩放级别.可以设置options.minZoom和options.maxZoom设置缩放级别的限制.
pan:{x:0, y:0},// 图表的初始平移位置.
// interaction options:
minZoom:1e-50,// 图表缩放级别的最⼩界限.视⼝的缩放⽐例不能⼩于此缩放级别.
maxZoom:1e50,// 图表缩放级别的最⼤界限.视⼝的缩放⽐例不能⼤于此缩放级别.
zoomingEnabled:true,// 是否通过⽤户事件和编程⽅式启⽤缩放图形.
userZoomingEnabled:true,// 是否允许⽤户事件(例如⿏标滚轮，捏合缩放)缩放图形.对此缩放的编程更改不受此选项的影响.
panningEnabled:true,// 是否通过⽤户事件和编程⽅式启⽤平移图形.
userPanningEnabled:true,// 是否允许⽤户事件(例如拖动图形背景)平移图形.平移的程序化更改不受此选项的影响.
boxSelectionEnabled:false,// 是否启⽤了框选择(即拖动框叠加，并将其释放为选择).如果启⽤，则⽤
户必须点击以平移图表.
selectionType:'additive',// ⼀个字符串，指⽰⽤户输⼊的选择⾏为.对于'additive',⽤户进⾏的新选择将添加到当前所选元素的集合中.对于'single',⽤户做出的新选择成为当前所选元素的整个集合.
touchTapThreshold:8,// ⾮负整数，分别表⽰⽤户在轻击⼿势期间可以在触摸设备和桌⾯设备上移动的最⼤允许距离.这使得⽤户更容易点击.
// 这些值具有合理的默认值，因此建议不要更改这些选项，除⾮您有充分的理由这样做.⼤值⼏乎肯定会产⽣不良后果。
desktopTapThreshold:4,// ⾮负整数，分别表⽰⽤户在轻击⼿势期间可以在触摸设备和桌⾯设备上移动的最⼤允许距离.这使得⽤户更容易点击.
// 这些值具有合理的默认值，因此建议不要更改这些选项，除⾮您有充分的理由这样做.⼤值⼏乎肯定会产⽣不良后果。
autolock:false,// 默认情况下是否应锁定节点(根本不可拖动，如果true覆盖单个节点状态).
autoungrabify:false,// 默认情况下节点是否不允许被拾取(⽤户不可抓取，如果true覆盖单个节点状态).
autounselectify:false,// 默认情况下节点是否允许被选择(不可变选择状态，如果true覆盖单个元素状态).
// rendering options:
headless:false,// true：空运⾏，不显⽰不需要容器容纳.false：显⽰需要容器容纳.
styleEnabled:true,// ⼀个布尔值，指⽰是否应⽤样式.
hideEdgesOnViewport:true,// 渲染提⽰，设置为true在渲染窗⼝时，不渲染边.例如，移动某个顶点时或缩放时，边信息会被临时隐藏，移动结束后，边信息会被执⾏⼀次渲染.由于性能增强，此选项现在基本上没有实际意义.
hideLabelsOnViewport:true,// 渲染提⽰，当设置为true使渲染器在平移和缩放期间使⽤纹理⽽不是绘制元素时，使⼤图更具响应性.由于性能增强，此选项现在基本上没有实际意义.
textureOnViewport:true,// 渲染提⽰，当设置为true使渲染器在平移和缩放期间使⽤纹理⽽不是绘制元素时，使⼤图更具响应性.由于性能增强，此选项现在基本上没有实际意义.
没有实际意义.
motionBlur:true,// 渲染提⽰，设置为true使渲染器使⽤运动模糊效果使帧之间的过渡看起来更平滑.这可以增加⼤图的感知性能.由于性能增强，此选项现在基本上没有实际意义.
motionBlurOpacity:0.2,// 当motionBlur:true，此值控制运动模糊帧的不透明度.值越⾼，运动模糊效果越明显.由于性能增强，此选项现在基本上没有实际意义.  wheelSensitivity:1,// 缩放时更改滚轮灵敏度.这是⼀个乘法修饰符.因此,0到1之间的值会降低灵敏度(变焦较慢),⽽⼤于1的值会增加灵敏度(变焦更快).
pixelRatio:'auto',// 使⽤⼿动设置值覆盖屏幕像素⽐率(1.0建议，如果已设置).这可以通过减少需要渲染的有效区域来提⾼⾼密度显⽰器的性能, // 尽管在最近的浏览器版本中这是不太必要的.如果要使⽤硬件的实际像素⽐，可以设置pixelRatio: 'auto'(默认).
// DOM容器，决定内容展⽰的位置,⽅式⼀(原⽣):ElementById('xx'),⽅式⼆(jQuery):$('#xx')
container: ElementById('map_1556155828169'),
// 节点内容，所有的顶点及关系信息的载体
// ⽅式⼀:flat array of nodes and edges，顶点和节点平坦排列
elements:[
{data:{id:'n2'}, position:{x:400, y:200},},// node n2
{data:{id:'n3'}, position:{x:123, y:234}},// node n3
{data:{id:'nparent'}},// node nparent, 复合节点
{// edge e1
group:'edges',/* 'nodes' for a node, 'edges' for an edge，指定了'source'和'target'属性，可省略此属性. */
data:{
id:'e1',
/* 因为指定了'source'和'target'，所以推断为边缘. `ve()`可以有效地更改'source'和'target'的内容. */
source:'n1',/* 起点 */ target:'n2'/* 终点 */
}
}
],
// or
// ⽅式⼆: nodes保存所有节点, edges保存所有关系.
elements:{
nodes:[{data:{id:'n2'}, position:{x:400, y:200},},{data:{id:'n3'}, position:{x:123, y:234}},{data:{id:'nparent'}},],
edges:[
{// edge e1
group:'edges',/* 'nodes' for a node, 'edges' for an edge，指定了'source'和'target'属性，可省略此属性. */
data:{
id:'e1',
/* 因为指定了'source'和'target'，所以推断为边缘. `ve()`可以有效地更改'source'和'target'的内容. */
source:'n1',/* 起点 */ target:'n2'/* 终点 */
}
}
]
},
// ⽤于设置图形样式的样式表.为⽅便起见，也可以将此选项指定为解析为样式表的promise.
style:[
{selector:'node', style:{'label':'data(id)'}}
],
// ⼀个指定布局选项的普通对象.
layout:{name:'preset'},
});
节点属性说明
let ele =
{// ⼀个节点
group:'nodes',// 'nodes' for a node, 'edges' for an edge
data:{// 元素数据
id:'n1',// 每个元素的唯⼀标识字段id(字符串或数字)，在未定义的情况下⾃动分配.
parent:'nparent',// 表⽰复合节点的⽗级id，未定义代表⽆⽗结点.'ve()'可以有效地更改'parent'.      xxx:'xxx',// 其他⽤户数据
},
scratch:{// 暂存数据(通常是临时数据或⾮序列化数据).
_foo:'bar'// 其他⽤户数据
},
position:{x:100, y:100},// 节点位置
renderedPosition:{x:200, y:200},// 节点呈现位置，优先级⾼于position
selected:false,// 节点被选择
selectable:true,// 节点可以被选择
locked:false,// 节点是否被锁定，锁定后，位置不可变
grabbable:true,// ⽤户是否可以抓取和移动节点
classes:['foo','bar']// 类样式，可以是['foo', 'bar']，也可以是'foo bar'
};
关系属性说明
let edge ={ // edge e1
group: 'edges', /* 'nodes'for a node, 'edges'for an edge，指定了'source'和'target'属性，可省略此属性. */  data: {
id: 'e1',
/* 因为指定了'source'和'target'，所以推断为边缘. `ve()`可以有效地更改'source'和'target'的内容. */    source: 'n1', /* 起点 */ target: 'n2',  /* 终点 */
xxx: 'xxx', // 其他⽤户数据
},
scratch: { // 暂存数据(通常是临时数据或⾮序列化数据).
_foo: 'bar' // 其他⽤户数据
},
selected: false, // 关系被选择
selectable: true, // 关系可以被选择
classes: ['foo', 'bar'] // 类样式，可以是['foo', 'bar']，也可以是'foo bar'
}
初始化
安装
要通过npm安装Cytoscape.js: npm install cytoscape
引⽤
import cytoscape from ‘cytoscape’;
let cytoscape = require(‘cytoscape’);
创建实例
let cy =cytoscape({
container: ElementById('map_1556155828169')
});
初始化元素
参考: .
elements:[
{data:{id:'n2'}, position:{x:400, y:200},},// node n2
{data:{id:'n3'}, position:{x:123, y:234}},// node n3
{data:{id:'nparent'}},// node nparent, 复合节点
{// edge e1
group:'edges',/* 'nodes' for a node, 'edges' for an edge，指定了'source'和'target'属性，可省略此属性. */
data:{
id:'e1',
/* 因为指定了'source'和'target'，所以推断为边缘. `ve()`可以有效地更改'source'和'target'的内容. */
source:'n1',/* 起点 */ target:'n2'/* 终点 */
}
}
],
// or
// ⽅式⼆: nodes保存所有节点, edges保存所有关系.
elements:{
nodes:[{data:{id:'n2'}, position:{x:400, y:200},},{data:{id:'n3'}, position:{x:123, y:234}},{data:{id:'nparent'}},],    edges:[
{// edge e1
group:'edges',/* 'nodes' for a node, 'edges' for an edge，指定了'source'和'target'属性，可省略此属性. */
data:{
id:'e1',
/* 因为指定了'source'和'target'，所以推断为边缘. `ve()`可以有效地更改'source'和'target'的内容. */
source:'n1',/* 起点 */ target:'n2'/* 终点 */
}
}
]
},
基本图形操作原生js和js的区别
添加元素
cy.add（eleObj)// 将指定的元素添加到图形中. eleObj 指定元素的普通对象.
cy.add（eleObjs)// 将指定的元素添加到图形中. eleObjs 由普通对象指定的元素数组.
cy.add（eles)// 将指定的元素添加到图形中. eles 元素的集合.
// 如果使⽤普通元素对象, 则必须遵循初始化时使⽤的相同格式.
// 通过普通对象添加节点
cy.add({group:'nodes', data:{ weight:75}, position:{ x:200, y:200}});
/
/ 添加节点和关系
var eles = cy.add([
{ group:'nodes', data:{ id:'n0'}, position:{ x:100, y:100}},
{ group:'nodes', data:{ id:'n1'}, position:{ x:200, y:200}},
{ group:'edges', data:{ id:'e0', source:'n0', target:'n1'}}
]);
删除元素
// ⽅式〇:
/
/ ⽅式⼀:
let collection = cy.elements('node[weight > 50]');// 删除节点中,weight属性⼤于50的元素
// ⽅式⼆:
创建新空集合

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。