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容器,决定内容展示的位置,方式一(原生):document.getElementById('xx'),方式二(jQuery):$('#xx')
  container: document.getElementById('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',所以推断为边缘. `eles.move()`可以有效地更改'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',所以推断为边缘. `eles.move()`可以有效地更改'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,未定义代表无父结点.'eles.move()'可以有效地更改'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',所以推断为边缘. `eles.move()`可以有效地更改'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: document.getElementById('map_1556155828169')
});

初始化元素

• 参考: Elements JSON.

  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',所以推断为边缘. `eles.move()`可以有效地更改'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',所以推断为边缘. `eles.move()`可以有效地更改'source'和'target'的内容. */
          source: 'n1', /* 起点 */ target: 'n2'  /* 终点 */
        }
      }
    ]
  },

基本图形操作

添加元素

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

删除元素

cy.remove(eles) // 删除指定的元素. eles 要删除的元素集合.
cy.remove(selector) // 删除与指定选择器匹配的图形中的元素. selector 匹配此选择器的元素将被删除.
// 方式〇:
cy.remove( cy.getElementById('n7') ); // 删除id='n7'的元素
// 方式一:
let collection = cy.elements('node[weight > 50]'); // 删除节点中,weight属性大于50的元素
cy.remove( collection );
// 方式二:
cy.remove('node[weight > 100]'); // 删除节点中,weight属性大于100的元素
cy.remove('node[id = "n7"]'); // 删除节点中,id属性等于n7的元素

创建新空集合

cy.collection() // 获得一个空集合.
// 保留已单击的节点集合
var collection = cy.collection();
cy.nodes().on('click', (e) => {
  var clickedNode = e.target;
  collection = collection.union(clickedNode);
});

获取指定元素

cy.getElementById(id) // id 要获取的元素的id.

cy.getElementById('n7');

元素筛选

cy.$( selector ) // 获取图表中与指定选择器匹配的元素
cy.elements( selector ) // 获取图表中与指定选择器匹配的元素
cy.nodes( selector ) // 获取图表中与指定选择器匹配的节点元素
cy.edges( selector ) // 获取图表中与指定选择器匹配的关系元素
cy.filter( selector ) // 获取图表中与指定选择器匹配的元素
cy.filter( function(ele, i, eles) ) // 获取图形中与指定过滤器函数匹配的元素
    ele 当前元素.
    i 计数器, 用于迭代图中元素.
    eles 当前元素集合.

// 获取权重大于50的节点
cy.nodes('[weight > 50]');

// 获取源节点为'j'的边信息
cy.edges('[source = "j"]');

// 获取权重大于50的所有节点和边缘
cy.elements('[weight > 50]');
cy.filter('[weight > 50]');

// 使用过滤功能获取权重大于50的节点
cy.filter(function(element, i){
  return element.isNode() && element.data('weight') > 50;
});

元素批量更新

cy.batch( function() ) // 一个回调函数, 您可以在其中对元素进行批量更新
cy.startBatch() // 手动开始批处理(对异步情况很有用)
cy.endBatch() // 手动结束批处理(对异步情况很有用)

// 当修改元素时, 每个修改都可以触发样式计算和重绘,具体取决于重绘的时间.以下修改导致两个样式计算和至少一个绘制.
cy.getElementById('j').data('weight', '70').addClass('funny').removeClass('serious');
// 这对于少数几个元素的少数操作来说不是问题, 但对于许多元素的许多操作,最终会出现冗余样式计算和冗余重绘.

// 此功能对于一次对元素进行许多更改很有用,如下:
// 同步风格:
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.mount( container ) // container: 一个HTML DOM元素容器,使用该容器渲染内容.

在容器中删除实例

cy.unmount() // 从当前容器中删除实例.

销毁实例

cy.destroy()

设置或获取暂存数据

完善中

图事件

on 事件

别名: cy.bind(), cy.listen(), cy.addListener()
说明: 用此方式绑定的事件,在下次解绑前一直有效.
cy.on( events [, selector], function(event) )
    events 以空格分隔的事件名称列表.
    selector [可选]用于指定处理程序运行的元素的选择器.
    function(event) 发生其中一个指定事件时调用的处理函数.
        event 事件对象.

// 监听节点的点击事件
cy.on('tap', 'node', function(evt){
  var node = evt.target;
  console.log( 'tapped ' + node.id() );
});

promiseOn事件

别名: cy.pon()
说明: 用此方式绑定的事件,仅在此类事件首次触发时触发,且只执行一次.
cy.promiseOn( events [, selector] )
    events 以空格分隔的事件名称列表.
    selector [可选]用于指定处理程序运行的元素的选择器.
// 例如: 
cy.pon('tap').then(function( event ){
  console.log('tap promise fulfilled');
});

one事件-一次性事件

说明: 用此方式绑定的事件,只运行一次处理程序.
cy.one( events [, selector], function(event) ) // 一次性事件
    events 以空格分隔的事件名称列表.
    selector [可选]用于指定处理程序运行的元素的选择器.
    function(event) 发生其中一个指定事件时调用的处理函数.
        event 事件对象.

cy.one('tap', 'node', function(){
  console.log('tap!');
});
// 当$无效时,可使用cy.getElementById()
cy.$('node').eq(0).trigger('tap'); // tap!
cy.$('node').eq(1).trigger('tap'); // nothing b/c already tapped

removeListener事件

别名: cy.off(), cy.unbind(), cy.unlisten()
说明: 用此方式绑定的事件,仅在此类事件首次触发时触发,且只执行一次.
cy.removeListener( events [, selector] [, handler] )
    events 以空格分隔的事件名称列表.
    selector [可选]用于指定处理程序运行的元素的选择器.
    handler  [可选]对要删除的处理函数的引用.

// 对于所有处理程序: 
cy.on('tap', function(){ /* ... */ });
// remove all tap listener handlers, including the one above
cy.removeListener('tap');

// 对于特定的处理程序:
let handler = function(){
  console.log('called handler');
};
cy.on('tap', handler);
let otherHandler = function(){
  console.log('called other handler');
};
cy.on('tap', otherHandler);
cy.removeListener('tap', handler);

emit事件-发出一个或多个事件

别名:
cy.emit( events [, extraParams] ) // 发出一个或多个事件
    events 以空格分隔的事件名称列表.
    extraParams [可选]要传递给处理程序的其他参数数组.
// 例子
cy.on('tap', function(evt, f, b){
  console.log('tap', f, b);
});
cy.emit('tap', ['foo', 'bar']);

ready事件-图表准备就绪后立即运行

cy.ready( function(event) ) // 图表准备就绪后立即运行
    function(event) 图表准备就绪后立即运行回调函数.
        event ready事件对象.

布局

布局-创建并返回布局对象

别名: cy.createLayout(), cy.makeLayout()
注意: 必须调用layout.run()它才能影响图形.
cy.layout(options) // 创建并返回布局对象
    options 布局选项

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

样式操作

cy.style() // 获取当前样式对象.
cy.style( stylesheet ) // 指定新样式表以替换现有样式表
    stylesheet 任一个cytoscape.stylesheet()对象,一个字符串的样式表,或者样式表JSON(接受相同的格式options.style在初始化).

持续更新中…