Introduction

About

Cytoscape.js is an open-source graph library written in JavaScript. You can use Cytoscape.js for graph analysis and visualisation.

Cytoscape.js allows you to easily display graphs in your websites. Because Cytoscape.js allows the user to interact with the graph and the library allows the client to hook into user events, Cytoscape.js is easily integrated into your webapp, especially since Cytoscape.js supports both desktop browsers, like Chrome, and mobile browsers, like on the iPad.

Cytoscape.js also has graph analysis in mind: The library contains a slew of useful functions in graph theory. You can use Cytoscape.js headlessly on Node.js to do graph analysis in the terminal or on a web server.

The library was developed at the Donnelly Centre at the University of Toronto. It is the successor of Cytoscape Web.

Cytoscape.js & Cytoscape

Though Cytoscape.js shares its name with Cytoscape, Cytoscape.js is not Cytoscape. Cytoscape.js is a JavaScript library for programmers. It is not an app for end-users, nor can you just copy-paste some code to "automagically" make you a webapp.

Cytoscape.js is a JavaScript library: It gives you a reusable graph widget that you can integrate with the rest of your webapp with your own JavaScript code. The keen members of the audience will point out that this means that Cytoscape plugins — written in Java — will obviously not work in Cytoscape.js — written in JavaScript.

We do follow some similar philosophies with Cytoscape: Graph style and data should be separate, and the library should provide core functionality with extensions adding functionality on top of the library.

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

Notation

Architecture & API

There are two components in the architecture that a developer need concern himself in order to use Cytoscape.js, the core and the collection. In Cytoscape.js, the core is a developer's main entry point into the library. From the core, a developer can run layouts, alter the viewport, and perform other operations on the graph as a whole.

The core provides several functions to access elements in the graph. Each of these functions returns a collection, a set of elements in the graph. A set of functions are available on collections that allow the developer to filter the collection, perform operations on the collection, traverse the graph about the collection, get data about elements in the collection, and so on.

Notation

There are several types that different functions can be executed on, and the variable names used to denote these types in the documentation are outlined below:

Notation       Works on
--------       --------
cy ........... the core
eles ......... a collection of one or more elements (nodes and edges)
ele .......... a collection of a single element (node or edge)
nodes ........ a collection of one or more nodes
node ......... a collection of a single node
edges ........ a collection of one or more edges
edge ......... a collection of a single edge

By default, a function returns a reference back to the calling object to allow for jQuery-like chaining (e.g. obj.fn1().fn2().fn3()). Unless otherwise indicated in this documentation, a function is chainable in this manner unless a different return value is specified. This applies both to the core and to collections.

Position

There is an important distinction to make for position: A position may be a model position or a rendered position.

A model position — as its name suggests — is the position stored in the model for an element. An element's model position remains constant, despite changes to zoom and pan.

A rendered position is an on-screen location relative to the viewport. For example, a rendered position of { x: 100, y: 100 } specifies a point 100 pixels to the right and 100 pixels down from the top-left corner of the viewport. An element's rendered position naturally changes as zoom and pan changes, because the element's on-screen position in the viewport changes as zooming and panning are applied.

In this documentation, "position" refers to model position unless otherwise stated.

Selectors

Notes & caveats

A selector functions similar to a jQuery selector on DOM elements, but selectors in Cytoscape.js instead work on collections.

The selectors can be combined together to make powerful queries in Cytoscape.js, for example:

// get all selected nodes with weight greater than or equal to 30
cy.elements("node[weight >= 30]:selected");

Selectors can be joined together (effectively creating a logical OR) with commas:

// get both locked nodes AND selected edges 
cy.elements("node:locked, edge:selected");

It is important to note that strings need to be enclosed by quotation marks:

cy.filter("node[foo = bar]");   // this doesn't work
cy.filter("node[foo = 'bar']"); // but this does

Group & class

node or edge (group selector)
Matches elements based on group (node for nodes, edge for edges).

.className
Matches elements that have the specified class (e.g. use .foo for a class named "foo").

Data

[name]
Matches elements if they have the specified data attribute defined aka not undefined (e.g. [foo] for an attribute named "foo"). Here, null is considered a defined value.

[?name]
Matches elements if the specified data attribute is a truthy value (e.g. [?foo]).

[!name]
Matches elements if the specified data attribute is a falsey value (e.g. [!foo]).

[^name]
Matches elements if the specified data attribute is not defined aka undefined (e.g [^foo]). Here, null is considered a defined value.

[name = value]
Matches elements if their data attribute matches a specified value (e.g. [foo = 'bar'] or [num = 2]).

[name != value]
Matches elements if their data attribute doesn't match a specified value (e.g. [foo != 'bar'] or [num != 2]).

[name > value]
Matches elements if their data attribute is greater than a specified value (e.g. [foo > 'bar'] or [num > 2]).

[name >= value]
Matches elements if their data attribute is greater than or equal to a specified value (e.g. [foo >= 'bar'] or [num >= 2]).

[name < value]
Matches elements if their data attribute is less than a specified value (e.g. [foo < 'bar'] or [num < 2]).

[name <= value]
Matches elements if their data attribute is less than or equal to a specified value (e.g. [foo <= 'bar'] or [num <= 2]).

[name *= value]
Matches elements if their data attribute contains the specified value as a substring (e.g. [foo *= 'bar']).

[name ^= value]
Matches elements if their data attribute starts with the specified value (e.g. [foo ^= 'bar']).

[name $= value]
Matches elements if their data attribute ends with the specified value (e.g. [foo $= 'bar']).

@ (data attribute operator modifier)
Prepended to an operator so that is case insensitive (e.g. [foo @$= 'ar'], [foo @>= 'a'], [foo @= 'bar'])

{} (metadata brackets)
Use curly brackets in place of square ones to match against metadata instead of data (e.g. {degree > 2} matches elements of degree greater than 2). The properties that are supported include degree, indegree, and outdegree.

State

:animated
Matches elements that are currently being animated.

:unanimated
Matches elements that are not currently being animated.

:selected
Matches selected elements.

:unselected
Matches elements that aren't selected.

:selectable
Matches elements that are selectable.

:unselectable
Matches elements that aren't selectable.

:locked
Matches locked elements.

:unlocked
Matches elements that aren't locked.

:visible
Matches elements that are visible.

:hidden
Matches elements that are hidden.

:grabbed
Matches elements that are being grabbed by the user.

:free
Matches elements that are not currently being grabbed by the user.

:grabbable
Matches elements that are grabbable by the user.

:ungrabbable
Matches elements that are not grabbable by the user.

:removed
Matches elements that have been removed from the graph.

:inside
Matches elements that have are in the graph (they are not removed).

Style

Style in Cytoscape.js follows CSS conventions as closely as possible. In most cases, a property has the same name and behaviour as its corresponding CSS namesake. However, the properties in CSS are not sufficient to specify the style of some parts of the graph. In that case, additional properties are introduced that are unique to Cytoscape.js.

Properties

Notes

• Colours may be specified by name (e.g. red), hex (e.g. #ff0000 or #f00), RGB (e.g. rgb(255, 0, 0)), or HSL (e.g. hsl(0, 100%, 50%)).
• Values requiring a number, such as a length, can be specified in pixel values (e.g. 24px), unitless values that are implicitly in pixels (24), or em values (e.g. 2em).
• Opacity values are specified as numbers ranging on 0 <= opacity <= 1.

Element properties

These properties can be used on any element:

• cursor : The CSS cursor shown when the cursor is over top the element.
• color : The colour of the element's label.
• content : The text to display for an element's label.
• text-outline-color : The colour of the outline around the element's label text.
• text-outline-width : The size of the outline on label text.
• text-outline-opacity : The opacity of the outline on label text.
• text-opacity : The opacity of the label text, including its outline.
• font-family : A comma-separated list of font names to use on the label text.
• font-style : A CSS font style to be applied to the label text.
• font-weight : A CSS font weight to be applied to the label text.
• font-size : The size of the label text.
• visibility : Whether the element is visible; can be visible or hidden.
• opacity : The opacity of the element.
• z-index : A non-negative integer that specifies the z-ordering of the element. An element with a higher z-index is put on top of an element with a lower value.
• width : The element's width; the line width for edges or the horizontal size of a node.

Node properties

These properties apply only to nodes:

• text-valign : The vertical alignment of a label; may have value top, center, or bottom.
• text-halign : The vertical alignment of a label; may have value left, center, or right.
• background-color : The colour of the node's body.
• background-opacity : The opacity level of the node's body.
• background-image : The URL that points to the image that should be used as the node's background.
• border-color : The colour of the node's border.
• border-width : The size of the node's border.
• height : The height of the node's body.
• shape : The shape of the node's body; may be rectangle, roundrectangle, ellipse, or triangle.

Edge properties

These properties apply only to edges:

• source-arrow-shape : The shape of the edge's arrow on the source side; may be tee, triangle, square, circle, diamond, or none.
• source-arrow-color : The colour of the edge's arrow on the source side.
• target-arrow-shape : The shape of the edge's arrow on the target side; may be tee, triangle, square, circle, diamond, or none.
• target-arrow-color : The colour of the edge's arrow on the target side.
• line-color : The colour of the edge's line.

Core properties

These properties apply only to the core. You can use the special core selector string to set these properties.

• selection-box-color : The background colour of the selection box used for drag selection.
• selection-box-opacity : The opacity of the selection box.
• selection-box-border-color : The colour of the border on the selection box.
• selection-box-border-width : The size of the border on the selection box.
• panning-cursor : The CSS cursor shown when the user pans the graph.

Mappers

In addition to specifying the value of a property outright, the developer may also use a mapper to dynamically specify the property value.

data() specifies a direct mapping to an element's data field. For example, data(descr) would map a property to the value in an element's descr field in its data (i.e. ele.data("descr")). This is useful for mapping to properties like label text content (the content property).

mapData() specifies a linear mapping to an element's data field. For example, data(weight, 0, 100, blue, red) maps an element's weight to gradients between blue and red for weights between 0 and 100. An element with ele.data("weight") === 0 would be mapped to blue, for instance. Elements whose values fall outside of the specified range are mapped to the extremity values. In the previous example, an element with ele.data("weight") === -1 would be mapped to blue.

Events

Event object

Events passed to handler callbacks are jQuery-event-like objects. They have an additional field named cyTarget, which indicates the element or core that first caused the event.

User input device events

These are normal browser events that you can bind to via Cytoscape.js. You can bind these events to the core and to collections.

• mousedown : when the mouse button is pressed
• mouseup : when the mouse button is released
• click : after mousedown then mouseup
• mouseover : when the cursor is put on top of the target
• mouseout : when the cursor is moved off of the target
• mousemove : when the cursor is moved somewhere on top of the target
• touchstart : when one or more fingers starts to touch the screen
• touchmove : when one or more fingers are moved on the screen
• touchend : when one or more fingers are removed from the screen

Collection events

These events are custom to Cytoscape.js. You can bind to these events for collections.

• select : when an element is selected
• unselect : when an element is unselected
• lock : when an element is locked
• unlock : when an element is unlocked
• grab : when an element is grabbed by the mouse cursor or a finger on a touch input
• drag : when an element is grabbed and then moved
• free : when an element is freed (i.e. let go from being grabbed)
• position : when an element changes position
• data : when an element's data is changed
• bypass : when an element's bypass is changed
• add : when an element is added to the graph
• remove : when an element is removed from the graph

Graph events

These events are custom to Cytoscape.js, and they occur on the core.

• layoutstart : when a layout starts running
• layoutready : when a layout has set positions for all the nodes
• layoutstop : when a layout has finished running completely or otherwise stopped running
• load : when a new graph is loaded via initialisation or cy.load()
• ready : when a new instance of Cytoscape.js is ready to be interacted with
• done : when a new instance of Cytoscape.js is ready to be interacted with and its initial layout has finished running
• pan : when the viewport is panned
• zoom : when the viewport is zoomed

Core

The core object is your interface to the Cytoscape.js visualisation. It is your entry point to Cytoscape.js: All of Cytoscape.js's features are accessed through this object.

Initialisation

Script includes

To use Cytoscape.js in your HTML document:

<script src="cytoscape.js"></script>

To use Cytoscape.js in Node.js:

var cytoscape = require('cytoscape');

Getting started

An instance of Cytoscape.js correeponds to a graph. You can create an instance as follows:

cytoscape({
  container: someHtmlDomElement,
  ready: function(){}
});

If you are running Cytoscape.js in Node.js or otherwise running it headlessly, you will not specify the container option.

If you've included jQuery on a HTML document, you can alternatively initialise Cytoscape.js on a HTML DOM element using the traditional jQuery style:

$("#cy").cytoscape({ // for some div with id 'cy'
  ready: function(){
    // you can access the core object API through cy
  },
  ...
});

This initialises Cytoscape.js and returns back to you your instance of jQuery. You can continue using jQuery functions, as usual for a jQuery plugin.

For example,

$("#cy").cytoscape(options)
  .css("background", "red")
  .css("border-color", "black"); // can use jquery functions on 'cy' div

Because this style doesn't give you access to the cy object outside of the callback function, there is an option to get the cy object from a jQuery selector.

$("#cy").cytoscape(options);
var cy = $("#cy").cytoscape("get"); // now we have a global reference to `cy`

The ready callback

All of your code that uses the core object API, i.e. through the cy object in the examples above, must do so after the ready callback function has executed. You can specify the ready callback in the initialisation options, outlined in the following section.

Because the ready event may occur before you can bind to the core, you can use this shortcut to spread your code among several JavaScript files without having to call a bunch of global functions in options.ready.

// in foo.js
$(function(){ // on jquery ready

  $("#cy").cytoscape(function(eventObject){ // on Cytoscape.js ready on the `cy` div
    // this code executes when Cytoscape.js is ready even though we
    // don't actually initialise Cytoscape.js on the `cy` div until
    // bar.js is loaded

    var cy = this; // `this` holds the reference to the core object

    console.log("Ready, Freddie!");
  });

});

// in bar.js (should be after foo.js in your js includes)
$(function(){ // on jquery ready
  $("#cy").cytoscape(options);
});

Initialisation options

An instance of Cytoscape.js has a number of options that can be set on initialisation. They are outlined below.

$("#cy").cytoscape({
  layout: { ... },
  zoom: 1,
  minZoom: 1e-50,
  maxZoom: 1e50,
  pan: { x: 0, y: 0 },
  renderer: { ... },
  style: { ... },
  ready: function(evt){ ... },
  elements: ...
});

layout : A plain object that specifies layout options. Which layout is initially run is specified by the name field. Refer to a layout's documentation for the options it supports.

zoom : The initial zoom level of the graph. Make sure to disable viewport manipulation options, such as fit, in your layout so that it is not overridden when the layout is applied. You can set minZoom and maxZoom to set restrictions on the zoom level.

pan : The initial panning position of the graph. Make sure to disable viewport manipulation options, such as fit, in your layout so that it is not overridden when the layout is applied.

renderer : A plain object containing options for the renderer to be used. The name field specifies which renderer is used. You need not specify anything for this option, unless you want to use a custom renderer.

style : The stylesheet used to style the document.

For example:

{
  ...

  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'background-color': 'red',
        'border-color': '#ffff00'
      })
    .selector('edge')
      .css({
        'line-color': 'blue'
      })

  ...
}

ready : A callback function that is called when Cytoscape.js is ready to be interacted with. You can not call functions on the cy object before this function executes.

elements : An array of elements specified as plain objects.

For example:

{
  ...

  elements: [
    {
      data: { id: 'foo' }, 
      group: 'nodes'
    },

    {
      data: { id: 'bar' },
      group: 'nodes'
    },

    {
      data: { weight: 100 }, // elided id => autogenerated id 
      group: 'nodes',
      position: {
        x: 100,
        y: 100
      },
      classes: 'className1 className2',
      selected: true,
      selectable: true,
      locked: true,
      grabbable: true
    },

    {
      data: { id: 'baz', source: 'foo', target: 'bar' },
      group: 'edges'
    }
  ]

  ...
}

You can alternatively specify separate arrays indexed in a object by the group names so you don't have to specify the group property over and over for each element:

{
  ...

  elements: {
    nodes: [
      { data: { id: 'foo' } }, // NB no group specified
      { ... },
      { ... }
    ],

    edges: [
      { ... }
    ]
  }

  ...
}

Graph manipulation

cy.add({ group: "nodes", data: { id: "n0" } });

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

var n0 = cy.node("n1");
var n1 = cy.node("n2");
var e0 = cy.edge("e0");
n1.collection().add(n2).add(n3).remove(); // remove n0, n1, and e0

var n1e0 = n1.collection().add(e0);
cy.add(n0); // add a single element, n0
cy.add(n1e0); // add the collection of n1 and e0

var n0 = cy.nodes("#n0");
cy.remove(n0);

var collection = cy.elements("node[weight>50]");
cy.remove(collection);

cy.remove("node[weight>50]"); // remove nodes with weight greater than 50

cy.load([
  { data: { id: "n1" }, group: "nodes" },
  { data: { id: "n2" }, group: "nodes" },
  { data: { id: "e1", source: "n1", target: "n2" }, group: "edges" }
]);

cy.load({
  nodes: [
    { data: { id: "n1" } },
    { data: { id: "n2" } }
  ],

  edges: [
    { data: { id: "e1", source: "n1", target: "n2" } }
  ]
});

cy.load([ { data: { id: "n1" }, group: "nodes" } ], function(e){
  console.log("cy loaded elements");
}, function(e){
  console.log("cy laid out elements");
});

cy.one("load", function(e){
  console.log("cy loaded elements");
}).one("layoutdone", function(e){
  console.log("cy laid out elements");
});

cy.load([ { data: { id: "n1" }, group: "nodes" } ]);

var collection = cy.collection();
cy.nodes().live("click", function(){
  collection = collection.add(this);
});

var collection = cy.nodes("[weight>50]");

var collection = cy.edges("[source=n0]");

var collection = cy.elements("[weight>50]");
collection = cy.filter("[weight>50]"); // works the same as the above line

var collection = cy.filter(function(i, element){
  if( element.isNode() && element.data("weight") > 50 ){
    return true;
  }
  return false;
});

Viewport manipulation

var n0 = cy.node("n0");
cy.center(n0);

var n0 = cy.node("n0");
cy.center(n0);

cy.pan({ x: 100, y: 100 });
cy.zoom( 2 );
cy.reset();

cy.pan({
  x: 100,
  y: 100 
});

console.log( cy.pan() ); // prints { x: 100, y: 100 }

cy.panBy({
  x: 100,
  y: 0 
});

var options = {
  level: 2.0, // the zoom level
  renderedPosition: { x: 100, y: 100 }
};

var options = {
  level: 2.0, // the zoom level
  position: { x: 500, y: 625 }
};

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("#n0").position();
cy.zoom({
  level: 2.5,
  position: pos
});

Events

cy.on('click', 'nodes', { foo: 'bar' }, function(evt){
  console.log( evt.data.foo ); // 'bar'

  var node = this;
  console.log( 'clicked ' + node.id() );
});

cy.on('click', function(event){
  // cyTarget holds a reference to the originator
  // of the event (core or element)
  var evtTarget = event.cyTarget;

  if( evtTarget === cy ){
      console.log('click on background');
  } else {
    console.log('click on some element');
  }
});

cy.one('click', 'node', function(){
  console.log('click!');
});

cy.$('node').eq(0).trigger('click'); // click!
cy.$('node').eq(1).trigger('click'); // nothing b/c already clicked

cy.on("click", function(){ /* ... */ });

// unbind all click handlers, including the one above
cy.off("click");

var handler = function(){
  console.log("called handler");
};
cy.on("click", handler);

var otherHandler = function(){
  console.log("called other handler");
};
cy.on("click", otherHandler);

// just unbind handler
cy.off("click", handler);

cy.bind('click', function(evt, foo, bar){
  console.log('click');
});

cy.trigger('click', ['foo', 'bar']);

Visuals

options = {
    ready: undefined, // callback on layoutready
    stop: undefined, // callback on layoutstop
    fit: true // whether to fit to viewport
};

options = {
    fit: true, // whether to fit to viewport
    ready: undefined, // callback on layoutready
    stop: undefined, // callback on layoutstop
    positions: undefined, // map of (node id) => (position obj)
    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)
};

options = {
    fit: true, // whether to fit the viewport to the graph
    rows: undefined, // force num of rows in the grid
    columns: undefined, // force num of cols in the grid
    ready: undefined, // callback on layoutready
    stop: undefined // callback on layoutstop
};

options = {
    liveUpdate: true, // whether to show the layout as it's running
    ready: undefined, // callback on layoutready 
    stop: undefined, // callback on layoutstop
    maxSimulationTime: 4000, // max length in ms to run the layout
    fit: true, // fit to viewport
    padding: [ 50, 50, 50, 50 ], // top, right, bottom, left
    ungrabifyWhileSimulating: true, // so you can't drag nodes during layout

    // forces used by arbor (use arbor default on undefined)
    repulsion: undefined,
    stiffness: undefined,
    friction: undefined,
    gravity: true,
    fps: undefined,
    precision: undefined,

    // static numbers or functions that dynamically return what these
    // values should be for each element
    nodeMass: undefined, 
    edgeLength: undefined,

    stepSize: 1, // size of timestep in simulation

    // function that returns true if the system is stable to indicate
    // that the layout can be stopped
    stableEnergy: function( energy ){
        var e = energy; 
        return (e.max <= 0.5) || (e.mean <= 0.3);
    }
};

<head>
    ...

    <script src="arbor.js"></script>

    ...
</head>

// The null layout has no options.

cy.layout({ name: 'grid' });

cy.style()
  .resetToDefault() // start a fresh default stylesheet

  // and then define new styles
  .selector('node:selected')
    .css({ ... })
  ...

Collection

A collection contains a set of nodes and edges. Calling a function applies the function to all elements in the collection. When reading values from a collection, eles.data() for example, the value of the first element in the collection is returned. This follows the jQuery convention. For example:

// assume graph:
// n1[weight = 10], n2[weight = 60], n3[weight = 90]

var weight = cy.nodes().data("weight"); // returns 10

You can insure that you're reading from the element you want by using a selector to narrow down the collection to one element (i.e. eles.size() === 1) or the eles.eq() function.

Graph manipulation

cy.$(':selected').remove();

// remove selected elements
var eles = cy.$(':selected').remove();

// ... then some time later put them back
eles.restore();

Data

var n1 = cy.$('#n1');

// set the weight field in data
n1.data('weight', 75);

// set several fields at once
n1.data({
  foo: 'some value',
  bar: 'another value',
  baz: 'yet another value'
});

var weight = n1.data('weight');

Metadata

Position & dimensions

// get x for n1
var x = cy.$('#n1').position('x');

// get the whole position for n2
var pos = cy.$('#n2').position();

// set y for n1
cy.$('#n1').position('y', 100);

// set multiple
cy.$('#n2').position({
  x: 123,
  y: 456
});

Selection

Events

cy.on('click', function(evt){
  console.log( 'clicked ' + this.id() );
});

cy.$('node').one('click', function(){
  var ele = this;
  console.log('clicked ' + ele.id());
});

cy.$('#n1').trigger('click'); // clicked n1
cy.$('#n1').trigger('click'); // nothing
cy.$('#n2').trigger('click'); // clicked n2

cy.$('node').once('click', function(){
  var ele = this;
  console.log('clicked ' + ele.id());
});

cy.$('#n1').trigger('click'); // clicked n1
cy.$('#n1').trigger('click'); // nothing
cy.$('#n2').trigger('click'); // nothing

var n1 = cy.$('#n1');
var handler = function(){ console.log('click') };

// bind
n1.on('click', handler);

// bind some other handler
n1.on('click', function(){
  console.log('some other handler');
});

n1.trigger('click'); // 'click' & 'some other handler'

// unbind the renferenced handler
n1.off('click', handler);

n1.trigger('click'); // some other handler

// unbind all click handlers (including unnamed handler)
n1.off('click');

var n1 = cy.$('#n1');

n1.on('click', function(){
  console.log('click!!');
});

n1.trigger('click'); // click!!

Style

Animation

cy.nodes().animate({
  position: { x: 100, y: 100 },
  css: { backgroundColor: 'red' }
}, {
  duration: 1000
});

Comparison

Iteration

cy.elements().each(function(i, ele){
  console.log( ele.id() + ' is ' + ( ele.selected() ? 'selected' : 'not selected' ) );
});

Traversing

Building & filtering

Extensions

API

The extensions API is very simple, following this format:

cytoscape( type, name, extension );

The value of type can take on the following values:

• core : The extension adds a core function.
• collection : The extension adds a collection function.
• layout : The extension registers a layout prototype.
• renderer : The extension registers a renderer prototype.

The name argument indicates the name of the extension, which should be a single word in lower case.

Functions

Functions should be chainable, unless they need to return some other value. To make a function chainable, make sure to return this; at the end of your function.

Here is an example collection function:

cytoscape('collection', 'forEach', function( fn ){
  for( var i = 0; i < this.length; i++ ){
    fn.apply( this[i], [ i, this[i] ] );
  }

  return this; // chainability
});

Layouts

For an example layout, please refer to the null layout source code. The layout just sets each node to position (0, 0), and it is well documented.

Renderers

For an example renderer, please refer to the canvas renderer. If you're interested in writing a custom renderer for Cytoscape.js, please send an email to Max.