Cytoscape.js 2.3.5

Graph theory (a.k.a. network) library for analysis and visualisation (compatible with CommonJS/Node.js, AMD/Require.js, jQuery, Bower, npm, and plain JavaScript)
View on GitHub Download

Demos

Introduction

Factsheet

About

Cytoscape.js is an open-source graph theory (a.k.a. network) library written in JavaScript. You can use Cytoscape.js for graph analysis and visualisation.

Cytoscape.js allows you to easily display and manipulate rich, interactive graphs. 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 app, especially since Cytoscape.js supports both desktop browsers, like Chrome, and mobile browsers, like on the iPad. Cytoscape.js includes all the gestures you would expect out-of-the-box, including pinch-to-zoom, box selection, panning, et cetera.

Cytoscape.js also has graph analysis in mind: The library contains many 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.

Cytoscape.js is an open-source project, and anyone is free to contribute. For more information, refer to the GitHub README.

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 exactly the same as Cytoscape desktop. Cytoscape.js is a JavaScript library for programmers. It is not an app for end-users, and developers need to write code around Cytoscape.js to build graphcentric apps.

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

We are trying to make the two projects intercompatible as possible, and we do share philosophies with Cytoscape: Graph style and data should be separate, the library should provide core functionality with extensions adding functionality on top of the library, and so on.

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

Notation

Graph model

Cytoscape.js supports many different graph theory usecases. It supports directed graphs, undirected graphs, mixed graphs, loops, multigraphs, compound graphs (a type of hypergraph), and so on.

We are regularly making additions and enhancements to the library, and we gladly accept feature requests and pull requests.

Architecture & API

There are two components in the architecture that a developer need concern himself in order to use Cytoscape.js, the core (i.e. a graph instance) 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. 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.

Note that a collection is immutible by default, meaning that the set of elements within a collection can not be changed. The API returns a new collection with different elements when necessary, instead of mutating the existing collection. This allows the developer to safely use set theory operations on collections, use collections functionally, and so on.

Functions

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:

ShorthandWorks on
cythe core
elesa collection of one or more elements (nodes and edges)
elea collection of a single element (node or edge)
nodesa collection of one or more nodes
nodea collection of a single node
edgesa collection of one or more edges
edgea collection of a single edge

By default, a function returns a reference back to the calling object to allow for 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.

For functions that return a value, note that calling a singular — ele, node, or edge — function on a collection of more than one element will return the expected value for only the first element.

Position

A node's position refers to the centre point of its bounding box.

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. Panning is always measured in rendered coordinates.

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

Elements JSON

Examples are given that outline format of the elements JSON used to load elements into Cytoscape.js:

cytoscape({

  container: document.getElementById('cy'),

  elements: [
    { // node n1
      group: 'nodes', // 'nodes' for a node, 'edges' for an edge

      // NB: id fields must be strings
      data: { // element data (put dev data here)
        id: 'n1', // mandatory for each element, assigned automatically on undefined
        parent: 'nparent', // indicates the compound node parent id; not defined => no parent
      },

      position: { // the model position of the node (optional on init, mandatory after)
        x: 100,
        y: 100
      },

      selected: false, // whether the element is selected (default false)

      selectable: true, // whether the selection state is mutable (default true)

      locked: false, // when locked a node's position is immutable (default false)

      grabbable: true, // whether the node can be grabbed and moved by the user

      classes: 'foo bar', // a space separated list of class names that the element has

      // NB: you should only use `css` for very special cases; use classes instead
      css: { 'background-color': 'red' } // overriden style properties
    },

    { // node n2
      group: 'nodes',
      data: { id: 'n2' },
      renderedPosition: { x: 200, y: 200 } // can alternatively specify position in rendered on-screen pixels
    },

    { // node n3
      group: 'nodes',
      data: { id: 'n3', parent: 'nparent' },
      position: { x: 123, y: 234 }
    },

    { // node nparent
      group: 'nodes',
      data: { id: 'nparent', position: { x: 200, y: 100 } }
    },

    { // edge e1
      group: 'edges',
      data: {
        id: 'e1',
        source: 'n1', // the source node id (edge comes from this node)
        target: 'n2'  // the target node id (edge goes to this node)
      }
    }
  ],

  layout: {
    name: 'preset'
  },

  // so we can see the ids
  style: [
    {
      selector: 'node',
      css: {
        'content': 'data(id)'
      }
    }
  ]

});

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:

var cy = cytoscape({
  /* ... */

  container: document.getElementById('cy'),

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

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

      {
        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
      }
    ],

    edges: [
      { data: { id: 'baz', source: 'foo', target: 'bar' } } // NB no group specified
    ]
  }

  /* ... */
});

Compound nodes

Compound nodes are an addition to the traditional graph model. A compound node contains a number of child nodes, similar to how a HTML DOM element can contain a number of child elements.

Compound nodes are specified via the parent field in an element's data. Similar to the source and target fields of edges, the parent field is immutable: A node's parent can be specified when the node is added to the graph, and after that point, this parent-child relationship is immutable. However, you can effectively move child nodes via eles.move.

As far as the API is concerned, compound nodes are treated just like regular nodes — except in explicitly compound functions like node.parent(). This means that traditional graph theory functions like eles.dijkstra() and eles.neighborhood() do not make special allowances for compound nodes, so you may need to make different calls to the API depending on your usecase.

For instance:

var a = cy.$('#a'); // assume a compound node

// the neighbourhood of `a` contains directly connected elements
var directlyConnected = a.neighborhood();

// you may want everything connected to its descendants instead
// because the descendants "belong" to `a`
var indirectlyConnected = a.add( a.descendants() ).neighborhood();

Core

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

Initialisation

Script includes

To use Cytoscape.js in your HTML document:

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

Note that Cytoscape.js uses the dimensions of your HTML DOM element container for layouts and rendering at initialisation. Thus, it is very important to place your CSS stylesheets in the <head> before any Cytoscape.js-related code. Otherwise, dimensions may be sporadically reported incorrectly, resulting in undesired behaviour.

Also note that you should call cy.resize() when your code resizes the viewport.

To install Cytoscape.js via npm:

npm install cytoscape

To use Cytoscape.js in a CommonJS environment like Node.js:

var cytoscape = require('cytoscape');

To use Cytoscape.js with AMD/Require.js:

require(['cytoscape'], function(cytoscape){
  // ...
});

To install Cytoscape.js via Bower (in the terminal):

bower install cytoscape

Getting started

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

var cy = cytoscape({
  container: document.getElementById('cy'),
  ready: function(){ console.log('ready') }
});

If you are running Cytoscape.js in Node.js or otherwise running it headlessly, you will not specify the container option. When running Cytoscape.js headlessly in the browser, you should specify options.renderer.name as 'null' so that the default canvas renderer is not used to draw the graph. Outside of the browser (e.g. in Node.js) or if the convenience option options.headless is true, the null renderer is used by default.

You can alternatively initialise Cytoscape.js on a HTML DOM element using jQuery:

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

    console.log('ready');
  }

  // , ...
});

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

Part of initialising Cytoscape.js is synchronous and part may be asynchronous. The potentially asynchronous part is the initial layout, which may be used for setting the initial positions of nodes. If you use an asynchronous (a.k.a. continuous) layout at initialisation, you may want to use ready. You can guarantee that the initial layout takes no time if you specify all node positions manually in the elements JSON and use the preset layout — which does nothing by default.

Initialisation options

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

Note that everything is optional. By default, you get an empty graph with the default stylesheet. Environments outside the browser (e.g. Node.js) are automatically set as headless for convenience.

var cy = cytoscape({
  // very commonly used options:
  container: undefined, 
  elements: [ /* ... */ ],
  style: [ /* ... */ ],
  layout: { name: 'grid' /* , ... */ },
  ready: function(evt){ /* ... */ },

  // initial viewport state:
  zoom: 1,
  pan: { x: 0, y: 0 },

  // interaction options:
  minZoom: 1e-50,
  maxZoom: 1e50,
  zoomingEnabled: true,
  userZoomingEnabled: true,
  panningEnabled: true,
  userPanningEnabled: true,
  selectionType: (isTouchDevice ? 'additive' : 'single'),
  autolock: false,
  autoungrabify: false,
  autounselectify: false,

  // rendering options:
  headless: false,
  styleEnabled: true,
  hideEdgesOnViewport: false,
  hideLabelsOnViewport: false,
  textureOnViewport: false,
  motionBlur: false,
  wheelSensitivity: 1,
  pixelRatio: 1,
  initrender: function(evt){ /* ... */ },
  renderer: { /* ... */ }
});

Very commonly used options

container : A HTML DOM element in which the graph should be rendered. This is optional if Cytoscape.js is run headlessly or if you initialise using jQuery (in which case your jQuery object already has an associated DOM element).

elements : An array of elements specified as plain objects.

style : The stylesheet used to style the graph.

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. If you want to specify your node positions yourself in your elements JSON, you can use the preset layout — by default it does not set any positions, leaving your nodes in their current positions (e.g. specified in options.elements at initialisation time).

ready : A callback function that is called when Cytoscape.js has loaded the graph and the layout has specified initial positions of the nodes. After this point, rendering can happen, the user can interact with the graph, et cetera.

Initial viewport state

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 options.minZoom and options.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.

Interaction options

minZoom : A minimum bound on the zoom level of the graph. The viewport can not be scaled smaller than this zoom level.

maxZoom : A maximum bound on the zoom level of the graph. The viewport can not be scaled larger than this zoom level.

zoomingEnabled : Whether zooming the graph is enabled, both by user events and programmatically.

userZoomingEnabled : Whether user events (e.g. mouse wheel, pinch-to-zoom) are allowed to zoom the graph. Programmatic changes to zoom are unaffected by this option.

panningEnabled : Whether panning the graph is enabled, both by user events and programmatically.

userPanningEnabled : Whether user events (e.g. dragging the graph background) are allowed to pan the graph. Programmatic changes to pan are unaffected by this option.

selectionType : A string indicating the selection behaviour from user input. By default, this is set automatically for you based on the type of input device detected. On touch devices, 'additive' is default — a new selection made by the user adds to the set of currenly selected elements. On mouse-input devices, 'single' is default — a new selection made by the user becomes the entire set of currently selected elements (i.e. the previous elements are unselected).

autoungrabify : Whether nodes should be ungrabified (not grabbable by user) by default (if true, overrides individual node state).

autolock : Whether nodes should be locked (not movable at all) by default (if true, overrides individual node state).

autounselectify : Whether nodes should be unselectified (immutible selection state) by default (if true, overrides individual element state).

Rendering options

headless : A convenience option that initialises the instance to run headlessly. You do not need to set this in environments that are implicitly headless (e.g. Node.js). However, it is handy to set headless: true if you want a headless instance in a browser.

styleEnabled : A boolean that indicates whether styling should be used. For headless (i.e. outside the browser) environments, display is not necessary and so neither is styling necessary — thereby speeding up your code. You can manually enable styling in headless environments if you require it for a special case. Note that it does not make sense to disable style if you plan on rendering the graph.

hideEdgesOnViewport : When set to true, the renderer does not render edges while the viewport is being manipulated. This makes panning, zooming, dragging, et cetera more responsive for large graphs.

hideLabelsOnViewport : When set to true, the renderer does not render labels while the viewport is being manipulated. This makes panning, zooming, dragging, et cetera more responsive for large graphs.

textureOnViewport : When set to true, the renderer uses a texture (if supported) during panning and zooming instead of drawing the elements, making large graphs more responsive.

motionBlur : When set to true, the renderer will use a motion blur effect to make the transition between frames seem smoother. This can significantly increase the perceived performance for a large graphs.

wheelSensitivity : Changes the scroll wheel sensitivity when zooming. This is a multiplicative modifier. So, a value between 0 and 1 reduces the sensitivity (zooms slower), and a value greater than 1 increases the sensitivity (zooms faster).

pixelRatio : Overrides the screen pixel ratio with a manually set value (1.0 or 0.666 recommended, if set). This can be used to increase performance on high density displays by reducing the effective area that needs to be rendered. If you want to use the hardware's actual pixel ratio at the expense of performance, you can set pixelRatio: 'auto'.

initrender : A callback function that is called when Cytoscape.js has rendered its first frame. This is useful for grabbing screenshots etc after initialision, but in general you should use ready instead.

renderer : A plain object containing options for the renderer to be used. The options.renderer.name field specifies which renderer is used. You need not specify anything for the renderer option, unless you want to specify one of the rendering options below:

Graph manipulation

cy.add()

Add elements to the graph and return them.

cy.add( ,eleObj )

Add a specified element to the graph.

  • eleObj

    A plain object that specifies the element.

cy.add( ,eleObjs )

Add the specified elements to the graph.

  • eleObjs

    An array of elements specified by plain objects.

cy.add( ,eles )

Add the specified elements to the graph.

  • eles

    A collection of elements.

Details

If plain element objects are used, then the same format used at initialisation must be followed. It is important to note that the group attribute must be specified for plain objects, as this function can not infer whether the elements added are nodes or edges.

It is important to note that the positions of newly added nodes must be defined when calling cy.add(). Nodes can not be placed in the graph without a valid position — otherwise they could not be displayed.

If a collection of existing elements is specified, then copies of those elements are added, which allows for elements to be effectively transferred between instances of Cytoscape.js. If you want to add removed elements back to the graph, use eles.restore() instead.

Examples

Add a node from a plain object.

cy.add({
    group: "nodes",
    data: { weight: 75 },
    position: { x: 200, y: 200 }
});

Add nodes and edges to the graph as plain objects:

// 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" } }
]);
cy.remove()

Remove elements from the graph and return them.

cy.remove( ,eles )

Remove the specified elements.

  • eles

    A collection of elements to remove.

cy.remove( ,selector )

Remove elements in the graph matching the specified selector.

  • selector

    Elements matching this selector are removed.

Details

Though the elements specified to this function are removed from the graph, they may still exist in memory. However, almost all functions will not work on removed elements. For example, the eles.neighborhood() function will fail for a removed element: An element outside of the context of the graph can not have a neighbourhood defined. In effect, removed elements just exist so you can restore them back to the originating core instance or to a new instance.

Examples

Remove an element:

var j = cy.$("#j");
cy.remove( j );

Remove a collection:

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

Remove elements matching a selector:

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

Empty the graph, add the specified elements, and reapply the initialisation layout.

cy.load( ,eleObjs [,load] [,done] )
  • eleObjs

    An array of plain objects that specify the elements to load.

  • load [optional]

    A callback function called when the graph has loaded.

  • done [optional]

    A callback function called after the graph is loaded and just after the layout finishes.

Details

This function is merely a convenient way of setting the elements in the graph and applying a layout. For more control, the developer should use cy.add() and cy.layout() etc.

Note that eleObjs can be specified as an array with each element specifying its group, or alternatively, eleObjs can be specified as a group-indexed map, following the same format as in initialisation and outlined in the element JSON format.

Examples

As an array:

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

As a group-indexed map:

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

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

With specified callbacks:

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

This is equivalent to:

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

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

Return a new collection.

cy.collection()

Get an empty collection.

    cy.collection( ,selector )

    Get a collection from elements in the graph matching the specified selector.

    • selector

      Elements matching this selector are in the returned collection.

    cy.collection( ,elesArray )

    Get a collection from an array of elements.

    • elesArray

      The elements in this array are in the returned collection.

    Details

    This function is useful for building up collections.

    Examples

    Keep a collection of nodes that have been clicked:

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

    Get an element from its ID in a very performant way.

    cy.getElementById( ,id )
    • id

      The ID of the element to get.

    Examples

    cy.getElementById('j');
    
    cy.$() et al

    Get elements in the graph matching a selector or a filter function.

    cy.$( ,selector )

    Get elements in the graph matching the specified selector.

    • selector

      The selector the elements should match.

    cy.elements( ,selector )

    Get elements in the graph matching the specified selector.

    • selector

      The selector the elements should match.

    cy.nodes( ,selector )

    Get nodes in the graph matching the specified selector.

    • selector

      The selector the nodes should match.

    cy.edges( ,selector )

    Get edges in the graph matching the specified selector.

    • selector

      The selector the edges should match.

    cy.filter( ,selector )

    Get elements in the graph matching the specified selector.

    • selector

      The selector the elements should match.

    cy.filter( ,function(i, ele) )

    Get elements in the graph matching the specified filter function.

    • function(i, ele)

      The filter function that returns true for elements that should be returned.

      • i

        The counter used for iteration over the elements in the graph.

      • ele

        The current element under consideration for filtering (also accessible as this).

    Details

    If no elements in the graph match the selector, an empty collection is returned.

    The function cy.$() acts as an alias to cy.filter(): It's just convenient to save you typing. It is analogous to the jQuery $ alias used to search the document

    Examples

    Get nodes with weight greater than 50:

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

    Get edges with source node n0:

    cy.edges("[source='j']");
    

    Get all nodes and edges with weight greater than 50:

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

    Get nodes with weight greater than 50 with a filter function:

    cy.filter(function(i, element){
      if( element.isNode() && element.data("weight") > 50 ){
        return true;
      }
      return false;
    });
    
    cy.batch() et al

    Allow for manipulation of elements without triggering multiple style calculations or multiple redraws.

    cy.batch( ,function() )
    • function()

      A callback within which you can make batch updates to elements.

    cy.startBatch()

    Starts batching manually (useful for asynchronous cases).

      cy.endBatch()

      Ends batching manually (useful for asynchronous cases).

        Details

        Normally, when you modify elements, each modification can trigger a style calculation and a redraw — depending on timing for a redraw. For example, the following will cause two style calculations and at least one draw:

        cy.$('#j')
          .data('weight', '70')   // style update
          .addClass('funny')      // style update AGAIN
          .removeClass('serious') // style update YET AGAIN
        
          // at least 1 redraw here
          // possibly 3 total depending on speed of above operations
          // (for one ele almost certainly 1 redraw, but consider many eles)
        ;
        

        This is not a problem for a handful of operations on a handful of elements, but for many operations on many elements you end up with redundant style calculations and probably redundant redraws. In the worst case, you have eles.length * numOps style updates and redraws — and both style updates and redraws can be expensive. In the worst case when using cy.batch(), you limit the style updates to eles.length and you limit the redraws to just one.

        Thus, this function is useful for making many changes to elements at once. When the specified callback function is complete, only elements that require it have their style updated and the renderer makes at most a single redraw.

        This makes for very efficient modifications to elements, but it has some caveats. While inside the batch callback,

        • you can not reliably read element style or dimensions (it may have changed, or computed values may be out of date),
        • you probably do not want to use eles.css(), eles.show(), et cetera because they force a style bypass rather than a recalculation.

        Examples

        Synchronous style:

        cy.batch(function(){
          cy.$('#j')
            .data('weight', '70')
            .addClass('funny')
            .removeClass('serious')
          ;
        });
        

        Asynchronous style:

        cy.startBatch();
        
        cy.$('#j')
          .data('weight', '70')
          .addClass('funny')
          .removeClass('serious')
        ;
        
        cy.endBatch();
        
        cy.destroy()

        A convenience function to explicitly destroy the instance.

        Details

        The cy.destroy() function is not necessary but can be convenient in some cases. It is equivalent to removing the container DOM element from the document and removing any bound listeners from the renderer.

        Calling cy.destroy() is unnecessary if the container DOM element is removed from the document manually. In that case, listeners are cleaned up automatically.

        To drop the memory used by an instance, it is necessary to drop all of your own references to that instance so it can be garbage collected.

        Events

        cy.on()

        Bind to events that occur in the graph.

        cy.on( ,events [,selector] [,data],function(evt) )
        • events

          A space separated list of event names.

        • selector [optional]

          A selector to specify elements for which the handler is triggered.

        • data [optional]

          A plain object which is passed to the handler in the event object argument.

        • function(evt)

          The handler function that is called when one of the specified events occurs.

          • evt

            The event object.

        cy.on( ,eventsMap [,selector] [,data] )
        • eventsMap

          A map of event names to handler functions.

        • selector [optional]

          A selector to specify elements for which the handler is triggered.

        • data [optional]

          A plain object which is passed to the handler in the event object argument.

        Examples

        Bind to events that bubble up from elements matching the specified node selector:

        cy.on('tap', 'node', { foo: 'bar' }, function(evt){
          console.log( evt.data.foo ); // 'bar'
        
          var node = evt.cyTarget;
          console.log( 'tapped ' + node.id() );
        });
        

        Bind to all tap events that the core receives:

        cy.on('tap', function(event){
          // cyTarget holds a reference to the originator
          // of the event (core or element)
          var evtTarget = event.cyTarget;
        
          if( evtTarget === cy ){
              console.log('tap on background');
          } else {
            console.log('tap on some element');
          }
        });
        
        cy.one()

        Bind to events that occur in the graph, and trigger the handler only once.

        cy.one( ,events [,selector] [,data],function(evt) )
        • events

          A space separated list of event names.

        • selector [optional]

          A selector to specify elements for which the handler is triggered.

        • data [optional]

          A plain object which is passed to the handler in the event object argument.

        • function(evt)

          The handler function that is called when one of the specified events occurs.

          • evt

            The event object.

        cy.one( ,eventsMap [,selector] [,data] )
        • eventsMap

          A map of event names to handler functions.

        • selector [optional]

          A selector to specify elements for which the handler is triggered.

        • data [optional]

          A plain object which is passed to the handler in the event object argument.

        Examples

        cy.one('tap', 'node', function(){
          console.log('tap!');
        });
        
        cy.$('node').eq(0).trigger('tap'); // tap!
        cy.$('node').eq(1).trigger('tap'); // nothing b/c already tapped
        
        cy.off()

        Remove event handlers.

        cy.off( ,events [,selector] [,handler] )
        • events

          A space separated list of event names.

        • selector [optional]

          The same selector used to bind to the events.

        • handler [optional]

          A reference to the handler function to remove.

        cy.off( ,eventsMap [,selector] )
        • eventsMap

          A map of event names to handler functions to remove.

        • selector [optional]

          The same selector used to bind to the events.

        Examples

        For all handlers:

        cy.on("tap", function(){ /* ... */ });
        
        // unbind all tap handlers, including the one above
        cy.off("tap");
        

        For a particular handler:

        var handler = function(){
          console.log("called handler");
        };
        cy.on("tap", handler);
        
        var otherHandler = function(){
          console.log("called other handler");
        };
        cy.on("tap", otherHandler);
        
        // just unbind handler
        cy.off("tap", handler);
        
        cy.trigger()

        Trigger one or more events.

        cy.trigger( ,events [,extraParams] )
        • events

          A space separated list of event names to trigger.

        • extraParams [optional]

          An array of additional parameters to pass to the handler.

        Examples

        cy.bind('tap', function(evt, f, b){
          console.log('tap', f, b);
        });
        
        cy.trigger('tap', ['foo', 'bar']);
        
        cy.initrender()

        Get whether the initial render event has occurred (useful for plugins etc).

        Details

        This function returns whether the initrender event has occurred on the graph, meaning that the renderer has drawn the graph at least once. This is useful when you need to grab image data from the core, as this function will let you know whether that data is available yet: You can not grab the graph scene if it has not yet been rendered.

        cy.ready()

        Run a callback as soon as the graph becomes ready. If the graph is already ready, then the callback is called immediately.

        cy.ready( ,function() )
        • function()

          The callback run as soon as the graph is ready, inside which this refers to the core (cy).

        cy.initrender()

        Get whether the initial render event has occurred (useful for plugins etc).

        Details

        This function returns whether the initrender event has occurred on the graph, meaning that the renderer has drawn the graph at least once. This is useful when you need to grab image data from the core, as this function will let you know whether that data is available yet: You can not grab the graph scene if it has not yet been rendered.

        Viewport manipulation

        cy.center()

        Pan the graph to the centre of a collection.

        cy.center()

        Centre on all elements in the graph.

          cy.center( ,eles )

          Centre on the specified elements.

          • eles

            The collection to centre upon.

          Details

          If an empty collection or no collection is specified, then the graph is centred on all nodes and edges in the graph.

          Examples

          Centre the graph on node j:

          var j = cy.$("#j");
          cy.center( j );
          
          cy.fit()

          Pan and zooms the graph to fit to a collection.

          cy.fit()

          Fit to all elements in the graph.

            cy.fit( [,eles] [,padding] )

            Fit to the specified elements.

            • eles [optional]

              The collection to fit to.

            • padding [optional]

              An amount of padding (in pixels) to have around the graph

            Details

            If an empty collection or no collection is specified, then the graph is fit to all nodes and edges in the graph.

            Examples

            Fit the graph on nodes j and e:

            cy.fit( cy.$('#j, #e') );
            
            cy.reset()

            Reset the graph to the default zoom level and panning position.

            cy.reset()

            Resets the zoom and pan.

              Details

              This resets the viewport to the origin (0, 0) at zoom level 1.

              Examples

              setTimeout( function(){
                  cy.pan({ x: 50, y: -100 });
              }, 1000 );
              
              setTimeout( function(){
                  cy.zoom( 2 );
              }, 2000 );
              
              setTimeout( function(){
                  cy.reset();
              }, 3000 );
              
              cy.pan()

              Get or set the panning position of the graph.

              cy.pan()

              Get the current panning position.

                cy.pan( ,renderedPosition )

                Set the current panning position.

                Details

                This function pans the graph viewport origin to the specified rendered pixel position.

                Examples

                Pan the graph to (100, 100) rendered pixels.

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

                Relatively pan the graph by a specified rendered position vector.

                cy.panBy( ,renderedPosition )

                Details

                This function shifts the viewport relatively by the specified position in rendered pixels. That is, specifying a shift of 100 to the right means a translation of 100 on-screen pixels to the right.

                Examples

                Pan the graph 100 pixels to the right.

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

                Get or set whether panning is enabled.

                cy.panningEnabled()

                Get whether panning is enabled.

                  cy.panningEnabled( ,bool )

                  Set whether panning is enabled.

                  • bool

                    A truthy value enables panning; a falsey value disables it.

                  Examples

                  Enable:

                  cy.panningEnabled( true );
                  

                  Disable:

                  cy.panningEnabled( false );
                  
                  cy.userPanningEnabled()

                  Get or set whether panning by user events (e.g. dragging the graph background) is enabled.

                  cy.userPanningEnabled()

                  Get whether user panning is enabled.

                    cy.userPanningEnabled( ,bool )

                    Set whether user panning is enabled.

                    • bool

                      A truthy value enables user panning; a falsey value disables it.

                    Examples

                    Enable:

                    cy.userPanningEnabled( true );
                    

                    Disable:

                    cy.userPanningEnabled( false );
                    
                    cy.zoom()

                    Get or set the zoom level of the graph.

                    cy.zoom()

                    Get the zoom level.

                      cy.zoom( ,level )

                      Set the zoom level.

                      • level

                        The zoom level to set.

                      cy.zoom( ,options )

                      Set the zoom level.

                      • options

                        The options for zooming.

                        • level

                          The zoom level to set.

                        • position

                          The position about which to zoom.

                        • renderedPosition

                          The rendered position about which to zoom.

                      Details

                      The zoom level must be a positive number. Zoom levels that are not numbers are ignored; zoom levels that are numbers but outside of the range of valid zoom levels are considered to be the closest, valid zoom level.

                      When zooming about a point via cy.zoom( options ), the options are defined as follows.

                      For zooming about a rendered position (i.e. a position on-screen):

                      cy.zoom({
                        level: 2.0, // the zoom level
                        renderedPosition: { x: 100, y: 100 }
                      });
                      

                      For zooming about a model position:

                      cy.zoom({
                        level: 2.0, // the zoom level
                        position: { x: 0, y: 0 }
                      });
                      

                      For obvious reasons, you can zoom about a position or a rendered position but not both. You should specify only one of options.position or options.renderedPosition.

                      Examples

                      Zoom in to factor 2

                      cy.zoom(2);
                      

                      Zoom in to the minimum zoom factor

                      cy.zoom(0); // 0 is outside of the valid range and
                                  // its closest valid level is the min
                      

                      Zoom in to the maximum zoom factor

                      cy.zoom(1/0); // infinity is outside of the valid range and
                                    // its closest valid level is the max
                      

                      Zoom about a node

                      var pos = cy.nodes("#j").position();
                      cy.zoom({
                        level: 1.5,
                        position: pos
                      });
                      
                      cy.zoomingEnabled()

                      Get or set whether zooming is enabled.

                      cy.zoomingEnabled()

                      Get whether zooming is enabled.

                        cy.zoomingEnabled( ,bool )

                        Set whether zooming is enabled.

                        • bool

                          A truthy value enables zooming; a falsey value disables it.

                        Examples

                        Enable:

                        cy.zoomingEnabled( true );
                        

                        Disable:

                        cy.zoomingEnabled( false );
                        
                        cy.userZoomingEnabled()

                        Get or set whether zooming by user events (e.g. mouse wheel, pinch-to-zoom) is enabled.

                        cy.userZoomingEnabled()

                        Get whether user zooming is enabled.

                          cy.userZoomingEnabled( ,bool )

                          Set whether user zooming is enabled.

                          • bool

                            A truthy value enables user zooming; a falsey value disables it.

                          Examples

                          Enable:

                          cy.userZoomingEnabled( true );
                          

                          Disable:

                          cy.userZoomingEnabled( false );
                          
                          cy.minZoom()

                          Get or set the minimum zoom level.

                          cy.minZoom()

                          Get the minimum zoom level.

                            cy.minZoom( ,zoom )

                            Set the minimum zoom level.

                            • zoom

                              The new minimum zoom level to use.

                            cy.maxZoom()

                            Get or set the maximum zoom level.

                            cy.maxZoom()

                            Get the maximum zoom level.

                              cy.maxZoom( ,zoom )

                              Set the maximum zoom level.

                              • zoom

                                The new maximum zoom level to use.

                              cy.viewport()

                              Set the viewport state (pan & zoom) in one call.

                              cy.viewport( ,zoom,pan )
                              • zoom

                                The zoom level to set.

                              • pan

                                The pan to set (a rendered position).

                              Examples

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

                              Get or set whether box selection is enabled.

                              cy.boxSelectionEnabled()

                              Get whether box selection is enabled.

                                cy.boxSelectionEnabled( ,bool )

                                Set whether box selection is enabled.

                                • bool

                                  A truthy value enables box selection; a falsey value disables it.

                                Examples

                                Enable:

                                cy.boxSelectionEnabled( true );
                                

                                Disable:

                                cy.boxSelectionEnabled( false );
                                
                                cy.width()

                                Get the on-screen width of the viewport in pixels.

                                cy.height()

                                Get the on-screen height of the viewport in pixels.

                                cy.extent()

                                Get the extent of the viewport, a bounding box in model coordinates that lets you know what model positions are visible in the viewport.

                                Details

                                This function returns a plain object bounding box with format { x1, y1, x2, y2, w, h }.

                                cy.autolock()

                                Get or set whether nodes are automatically locked (i.e. if true, nodes are locked despite their individual state).

                                cy.autolock()

                                Get whether autolocking is enabled.

                                  cy.autolock( ,bool )

                                  Set whether autolocking is enabled.

                                  • bool

                                    A truthy value enables autolocking; a falsey value disables it.

                                  Examples

                                  Enable:

                                  cy.autolock( true );
                                  

                                  Disable:

                                  cy.autolock( false );
                                  
                                  cy.autoungrabify()

                                  Get or set whether nodes are automatically ungrabified (i.e. if true, nodes are ungrabbale despite their individual state).

                                  cy.autoungrabify()

                                  Get whether autoungrabifying is enabled.

                                    cy.autoungrabify( ,bool )

                                    Set whether autoungrabifying is enabled.

                                    • bool

                                      A truthy value enables autoungrabbifying; a falsey value disables it.

                                    Examples

                                    Enable:

                                    cy.autoungrabify( true );
                                    

                                    Disable:

                                    cy.autoungrabify( false );
                                    
                                    cy.autounselectify()

                                    Get or set whether nodes are automatically unselectified (i.e. if true, nodes are unselectable despite their individual state).

                                    cy.autounselectify()

                                    Get whether autounselectifying is enabled.

                                      cy.autounselectify( ,bool )

                                      Set whether autounselectifying is enabled.

                                      • bool

                                        A truthy value enables autounselectifying; a falsey value disables it.

                                      Examples

                                      Enable:

                                      cy.autounselectify( true );
                                      

                                      Disable:

                                      cy.autounselectify( false );
                                      
                                      cy.forceRender()

                                      Force the renderer to redraw (i.e. draw a new frame).

                                      Details

                                      This function forces the renderer to draw a new frame. It is useful for very specific edgecases, such as in certain UI plugins, but it should not be needed for most developers.

                                      cy.resize()

                                      Force the renderer to recalculate the viewport bounds.

                                      Details

                                      If your code resizes the graph's dimensions or position (i.e. by changing the style of the HTML DOM element that holds the graph), you will want to call cy.resize() to have the graph resize and redraw itself.

                                      Cytoscape.js can not automatically monitor the bounding box of the viewport, as querying the DOM for those dimensions can be expensive. Although cy.resize() is automatically called for you on the window's resize event, there is no resize or style event for arbitrary DOM elements.

                                      Animation

                                      cy.animated()

                                      Get whether the viewport is currently being animated.

                                      cy.animate()

                                      Animate the viewport.

                                      cy.animate( ,props,options )
                                      • props

                                        An object containing the properties to animate.

                                        • zoom

                                          A zoom level to which the graph will be animated.

                                        • pan

                                          A panning position to which the graph will be animated.

                                        • panBy

                                          A relative panning position to which the graph will be animated.

                                        • fit

                                          An object containing fitting options from which the graph will be animated.

                                          • eles

                                            Elements or a selector to which the viewport will be fitted.

                                          • padding

                                            Padding to use with the fitting.

                                        • center

                                          An object containing centring options from which the graph will be animated.

                                          • eles

                                            Elements or a selector to which the viewport will be centred.

                                      • options

                                        An object containing animation options.

                                        • duration

                                          The duration of the animation in milliseconds.

                                        • queue

                                          A boolean indicating whether to queue the animation.

                                        • complete

                                          A function to call when the animation is done.

                                        • step

                                          A function to call each time the animation steps.

                                      Examples

                                      Manual pan and zoom:

                                      cy.animate({
                                        pan: { x: 100, y: 100 },
                                        zoom: 2
                                      }, {
                                        duration: 1000
                                      });
                                      

                                      Fit to elements:

                                      var j = cy.$('#j');
                                      
                                      cy.animate({
                                        fit: {
                                          eles: j,
                                          padding: 20
                                        }
                                      }, {
                                        duration: 1000
                                      });
                                      
                                      cy.delay()

                                      Add a delay between animations for the viewport.

                                      cy.delay( ,duration,complete )
                                      • duration

                                        How long the delay should be in milliseconds.

                                      • complete

                                        A function to call when the delay is complete.

                                      Examples

                                      cy
                                        .animate({
                                          fit: { eles: '#j' }
                                        })
                                      
                                        .delay(1000)
                                      
                                        .animate({
                                          fit: { eles: '#e' }
                                        })
                                      ;
                                      
                                      cy.stop()

                                      Stop all viewport animations that are currently running.

                                      cy.stop( ,clearQueue,jumpToEnd )
                                      • clearQueue

                                        A boolean, indicating whether the queue of animations should be emptied.

                                      • jumpToEnd

                                        A boolean, indicating whether the currently-running animations should jump to their ends rather than just stopping midway.

                                      Examples

                                      cy.animate({
                                        fit: { eles: '#j' }
                                      }, { duration: 2000 });
                                      
                                      // stop in the middle
                                      setTimeout(function(){
                                        cy.stop();
                                      }, 1000);
                                      
                                      cy.clearQueue()

                                      Remove all queued animations for the viewport.

                                      Layout

                                      cy.layout()

                                      Run a layout, which algorithmically positions the nodes in the graph.

                                      cy.layout( ,options )
                                      • options

                                        The layout options.

                                      Details

                                      For layouts included with Cytoscape.js, you can find their options documented in the Layouts section. For external layouts, please refer to their accompanying documentation.

                                      Examples

                                      Run the grid layout:

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

                                      Get a new layout, which can be used to algorithmically positions the nodes in the graph.

                                      cy.makeLayout( ,options )
                                      • options

                                        The layout options.

                                      You must specify options.name with the name of the layout you wish to use.

                                      This function creates and returns a layout object. You may want to keep a reference to the layout for more advanced usecases, such as running multiple layouts simultaneously.

                                      Note that you must call layout.run() in order for it to affect the graph.

                                      Examples

                                      var layout = cy.makeLayout({
                                        name: 'random'
                                      });
                                      
                                      layout.run();
                                      

                                      Style

                                      cy.style()

                                      Get the entry point to modify the visual style of the graph after initialisation.

                                      cy.style()

                                      Get the current style object.

                                        cy.style( ,stylesheet )

                                        Assign a new stylesheet to replace the existing one.

                                        • stylesheet

                                          Either a cytoscape.Stylesheet object, a string stylesheet, or a JSON stylesheet (the same formats accepted for options.style at initialisation).

                                        Details

                                        You can use this function to gain access to the visual style (stylesheet) after initialisation. This is useful if you need to change the entire stylesheet at runtime.

                                        Sets a new style by reference:

                                        // here a string stylesheet is used, but you could also use json or a cytoscape.Stylesheet object
                                        var stringStylesheet = 'node { background-color: cyan; }';
                                        cy.style( stringStylesheet );
                                        

                                        Set an entirely new style to the graph, specifying selectors and style properties functionally:

                                        cy.style()
                                          .resetToDefault() // start a fresh default stylesheet
                                        
                                          // and then define new styles
                                          .selector('node')
                                              .css('background-color', 'magenta')
                                        
                                          // ...
                                        
                                          .update() // update the elements in the graph with the new style
                                        ;
                                        

                                        You can also add to the existing stylesheet:

                                        cy.style()
                                          .selector('node')
                                            .css({
                                              'background-color': 'yellow'
                                            })
                                        
                                          .update() // update the elements in the graph with the new style
                                        ;
                                        

                                        You can also set the style from plain JSON:

                                        cy.style()
                                          .fromJson([
                                            {
                                              selector: 'node',
                                              css: {
                                                'background-color': 'red'
                                              }
                                            }
                                        
                                            // , ...
                                          ])
                                        
                                          .update() // update the elements in the graph with the new style
                                        ;
                                        

                                        You can also set the style from a style string (that you would probably pull from a file on your server):

                                        cy.style()
                                          .fromString('node { background-color: blue; }')
                                        
                                          .update() // update the elements in the graph with the new style
                                        ;
                                        

                                        Export

                                        cy.png()

                                        Export the current graph view as a PNG image in Base64 representation.

                                        cy.png( ,options )
                                        • options

                                          The export options.

                                          • bg

                                            The background colour of the image (transparent by default).

                                          • full

                                            Whether to export the current viewport view (false, default) or the entire graph (true).

                                          • scale

                                            This value specifies a positive number that scales the size of the resultant image.

                                        Examples

                                        var png64 = cy.png();
                                        
                                        // put the png data in an img tag
                                        $('#png-eg').attr('src', png64);
                                        

                                        Example image tag:

                                        cy.json()

                                        Export the graph as JSON, the same format used at initialisation.

                                        Details

                                        This function returns the same object that is used for initialisation. You will find this function useful if you would like to save the entire state of the graph, either for your own purposes or for future restoration of that graph state.

                                        Examples

                                        console.log( cy.json() );
                                        

                                        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:

                                        var weight = cy.nodes().data("weight");
                                        
                                        console.log( cy.nodes()[0].data("weight") + ' == ' + weight ); // weight is the first ele's weight
                                        

                                        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

                                        eles.remove()

                                        Remove the elements from the graph.

                                        Details

                                        This function removes the calling elements from the graph. The elements are not deleted — they still exist in memory — but they are no longer in the graph.

                                        A removed element just exists to be added back to its originating core instance or some other core instance. A removed element is not functional, because it is no longer a part of the graph: Nothing really makes sense for it anymore outside of the context of a graph. It merely exists in this limbo state so you can later add it back to some core instance.

                                        Examples

                                        Remove selected elements:

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

                                        Get whether the element has been removed from the graph.

                                        ele.inside()

                                        Get whether the element is inside the graph (i.e. not removed).

                                        eles.restore()

                                        Put removed elements back into the graph.

                                        Details

                                        This function puts back elements in the graph that have been removed. It will do nothing if the elements are already in the graph.

                                        An element can not be restored if its ID is the same as an element already in the graph. You should specify an alternative ID for the element you want to add in that case.

                                        Examples

                                        // remove selected elements
                                        var eles = cy.$(':selected').remove();
                                        
                                        // ... then some time later put them back
                                        eles.restore();
                                        
                                        eles.clone()

                                        Get a new collection containing clones (i.e. copies) of the elements in the calling collection.

                                        eles.move() et al

                                        Effectively move edges to different nodes or move nodes to different parent node. The modified (actually new) elements are returned.

                                        edges.move( ,location )

                                        Move edges to different nodes.

                                        • location

                                          Where the edges are moved. You can specify a new source, a new target, or both.

                                          • source

                                            The ID of the new source node.

                                          • target

                                            The ID of the new target node.

                                        nodes.move( ,location )

                                        Move nodes to different parent node.

                                        • location

                                          Where the nodes are moved.

                                          • parent

                                            The ID of the new parent node (use null for no parent).

                                        Details

                                        Note that this function does not really move the elements. That's not possible in the semantics of a graph. Instead, this function

                                        • gets JSON copies of the elements,
                                        • removes the original elements,
                                        • modifies the JSON copies as specified, and
                                        • adds new elements from the JSON copies and restores relationships (in the case of compound node descendants and connected edges).

                                        This creates the same effect as though the elements have been moved while maintaining the correct semantics for a graph.

                                        Examples

                                        Move an edge:

                                        cy.$('#ej').move({
                                          target: 'g'
                                        })
                                        

                                        Events

                                        eles.on()

                                        Bind to events that occur on the elements.

                                        eles.on( ,events [,selector] [,data],function(evt) )
                                        • events

                                          A space separated list of event names.

                                        • selector [optional]

                                          A delegate selector to specify child elements for which the handler is triggered.

                                        • data [optional]

                                          A plain object which is passed to the handler in the event object argument.

                                        • function(evt)

                                          The handler function that is called when one of the specified events occurs.

                                          • evt

                                            The event object.

                                        eles.on( ,eventsMap [,selector] [,data] )
                                        • eventsMap

                                          A map of event names to handler functions.

                                        • selector [optional]

                                          A delegate selector to specify child elements for which the handler is triggered.

                                        • data [optional]

                                          A plain object which is passed to the handler in the event object argument.

                                        Defails

                                        In the handler function, this references the originally bound object, and evt.cyTarget references the target of the event.

                                        Examples

                                        cy.on('tap', function(evt){
                                          console.log( 'tap ' + evt.cyTarget.id() );
                                        });
                                        
                                        eles.one()

                                        Bind a callback function that is triggered once per event per element.

                                        eles.one( ,events [,selector] [,data],function(evt) )
                                        • events

                                          A space separated list of event names.

                                        • selector [optional]

                                          A delegate selector to specify child elements for which the handler is triggered.

                                        • data [optional]

                                          A plain object which is passed to the handler in the event object argument.

                                        • function(evt)

                                          The handler function that is called when one of the specified events occurs.

                                          • evt

                                            The event object.

                                        eles.one( ,eventsMap [,selector] [,data] )
                                        • eventsMap

                                          A map of event names to handler functions.

                                        • selector [optional]

                                          A delegate selector to specify child elements for which the handler is triggered.

                                        • data [optional]

                                          A plain object which is passed to the handler in the event object argument.

                                        Details

                                        For each event specified to this function, the handler function is triggered once per element. This is useful for one-off events that occur on each element in the calling collection once.

                                        The semantics is a bit more complicated for compound nodes where a delegate selector has been specified: Note that the handler is called once per element in the calling collection, and the handler is triggered by matching descendant elements.

                                        Examples

                                        cy.$('node').one('tap', function(e){
                                          var ele = e.cyTarget;
                                          console.log('tapped ' + ele.id());
                                        });
                                        
                                        eles.once()

                                        Bind a callback function that is triggered once per event per collection.

                                        eles.once( ,events [,selector] [,data],function(evt) )
                                        • events

                                          A space separated list of event names.

                                        • selector [optional]

                                          A delegate selector to specify child elements for which the handler is triggered.

                                        • data [optional]

                                          A plain object which is passed to the handler in the event object argument.

                                        • function(evt)

                                          The handler function that is called when one of the specified events occurs.

                                          • evt

                                            The event object.

                                        eles.once( ,eventsMap [,selector] [,data] )
                                        • eventsMap

                                          A map of event names to handler functions.

                                        • selector [optional]

                                          A delegate selector to specify child elements for which the handler is triggered.

                                        • data [optional]

                                          A plain object which is passed to the handler in the event object argument.

                                        Details

                                        For each event specified to this function, the handler function is triggered once. This is useful for one-off events that occur on just one element in the calling collection.

                                        Examples

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

                                        Unbind one or more callback functions on the elements.

                                        eles.off( ,events [,selector] [,handler] )
                                        • events

                                          A space separated list of event names.

                                        • selector [optional]

                                          The same delegate selector used to bind to the events.

                                        • handler [optional]

                                          A reference to the handler function to remove.

                                        eles.off( ,eventsMap [,selector] )
                                        • eventsMap

                                          A map of event names to handler functions to remove.

                                        • selector [optional]

                                          The same delegate selector used to bind to the events.

                                        Examples

                                        var j = cy.$('#j');
                                        var handler = function(){ console.log('tap') };
                                        
                                        // bind
                                        j.on('tap', handler);
                                        
                                        // bind some other handler
                                        j.on('tap', function(){
                                          console.log('some other handler');
                                        });
                                        
                                        j.trigger('tap'); // 'tap' & 'some other handler'
                                        
                                        // unbind the renferenced handler
                                        j.off('tap', handler);
                                        
                                        j.trigger('tap'); // some other handler
                                        
                                        // unbind all tap handlers (including unnamed handler)
                                        j.off('tap');
                                        
                                        eles.trigger()

                                        Trigger events on the elements.

                                        eles.trigger( ,events [,extraParams] )
                                        • events

                                          A space separated list of event names to trigger.

                                        • extraParams [optional]

                                          An array of additional parameters to pass to the handler.

                                        Examples

                                        var j = cy.$('#j');
                                        
                                        j.on('tap', function(){
                                          console.log('tap!!');
                                        });
                                        
                                        j.trigger('tap'); // tap!!
                                        

                                        Data

                                        eles.data() et al

                                        Read and write developer-defined data associated with the elements.

                                        ele.data()

                                        Get all data for the element.

                                          ele.data( ,name )

                                          Get a particular data field for the element.

                                          • name

                                            The name of the field to get.

                                          ele.data( ,name,value )

                                          Set a particular data field for the element.

                                          • name

                                            The name of the field to set.

                                          • value

                                            The value to set for the field.

                                          ele.data( ,obj )

                                          Update multiple data fields at once via an object.

                                          • obj

                                            The object containing name-value pairs to update data fields.

                                          Details

                                          The following fields are immutable:

                                          • id : The id field is used to uniquely identify an element in the graph.
                                          • source & target : These fields define an edge's relationship to nodes, and this relationship can not be changed after creation.
                                          • parent : The parent field defines the parent (compound) node.

                                          Examples

                                          var j = cy.$('#j');
                                          
                                          // set the weight field in data
                                          j.data('weight', 60);
                                          
                                          // set several fields at once
                                          j.data({
                                            name: 'Jerry Jerry Dingleberry',
                                            height: 176
                                          });
                                          
                                          var weight = j.data('weight');
                                          
                                          eles.removeData()

                                          Remove developer-defined data associated with the elements.

                                          eles.removeData()

                                          Removes all mutable data fields for the elements.

                                            eles.removeData( ,names )

                                            Removes the specified mutable data fields for the elements.

                                            • names

                                              A space-separated list of fields to delete.

                                            Details

                                            The following data fields are immutable, and so they can not be removed:

                                            • id : The id field is used to uniquely identify an element in the graph.
                                            • source & target : These fields define an edge's relationship to nodes, and this relationship can not be changed after creation.
                                            • parent : The parent field defines the parent (compound) node.
                                            ele.scratch()

                                            Set or get scratchpad data, where temporary or non-JSON data can be stored. App-level scratchpad data should use namespaces prefixed with underscore, like '_foo'.

                                            ele.scratch()

                                            Get the entire scratchpad object for the element.

                                              ele.scratch( ,namespace )

                                              Get the scratchpad at a particular namespace.

                                              • namespace

                                                A namespace string.

                                              ele.scratch( ,namespace,value )

                                              Set the scratchpad at a particular namespace.

                                              • namespace

                                                A namespace string.

                                              • value

                                                The value to set at the specified namespace.

                                              Details

                                              This function is useful for storing temporary, possibly non-JSON data. Extensions — like layouts, renderers, and so on — use ele.scratch() namespaced on their registered name. For example, an extension named foo would use the namespace 'foo'.

                                              If you want to use this function for your own app-level data, you can prefix the namespaces you use by underscore to avoid collisions with extensions. For example, using ele.scratch('_foo') in your app will avoid collisions with an extension named foo.

                                              This function is useful for associating non-JSON data to an element. Whereas data stored via ele.data() is included by ele.json(), data stored by ele.scratch() is not. This makes it easy to temporarily store unserialisable data.

                                              Examples

                                              var j = cy.$('#j');
                                              
                                              // entire scratchpad:
                                              // be careful, since you could clobber over someone else's namespace or forget to use one at all!
                                              var fooScratch = j.scratch()._foo = {}; 
                                              // ... now you can modify fooScratch all you want
                                              
                                              // set namespaced scratchpad to ele:
                                              // safer, recommended
                                              var fooScratch = j.scratch('_foo', {});
                                              // ... now you can modify fooScratch all you want
                                              
                                              // get namespaced scratchpad from ele (assumes set before)
                                              var fooScratch = j.scratch('_foo');
                                              // ... now you can modify fooScratch all you want
                                              
                                              ele.removeScratch()

                                              Remove scratchpad data. You should remove scratchpad data only at your own namespaces.

                                              ele.removeScratch( ,namespace )

                                              Remove the scratchpad data at a particular namespace.

                                              • namespace

                                                A namespace string.

                                              ele.id()

                                              A shortcut to get the ID of an element.

                                              ele.json()

                                              Get the element's plain JavaScript object representation.

                                              Details

                                              This function returns the plain JSON representation of the element, the same format which is used at initialisation, in cy.load(), in cy.add() etc.

                                              Examples

                                              console.log( cy.$('#j').json() );
                                              
                                              eles.jsons()

                                              Get an array of the plain JavaScript object representation of all elements in the collection.

                                              Details

                                              This function returns the plain JSON representation of all elements in the collection, the same format which is used at initialisation, in cy.load(), in cy.add() etc.

                                              Examples

                                              console.log( cy.elements().jsons() );
                                              
                                              ele.group()

                                              Get the group string that defines the type of the element.

                                              Details

                                              The group strings are 'nodes' for nodes and 'edges' for edges. In general, you should be using ele.isEdge() and ele.isNode() instead of ele.group().

                                              ele.isNode()

                                              Get whether the element is a node.

                                              ele.isEdge()

                                              Get whether the element is an edge.

                                              edge.isLoop()

                                              Get whether the edge is a loop (i.e. source same as target).

                                              edge.isSimple()

                                              Get whether the edge is simple (i.e. source different than target).

                                              Metadata

                                              node.degree() et al
                                              node.degree( ,includeLoops )

                                              Get the degree of a node.

                                              • includeLoops

                                                A boolean, indicating whether loops are to be included in degree calculations.

                                              node.indegree( ,includeLoops )

                                              Get the indegree of a node.

                                              • includeLoops

                                                A boolean, indicating whether loops are to be included in degree calculations.

                                              node.outdegree( ,includeLoops )

                                              Get the outdegree of a node.

                                              • includeLoops

                                                A boolean, indicating whether loops are to be included in degree calculations.

                                              nodes.totalDegree( ,includeLoops )

                                              Get the total degree of a collection of nodes.

                                              • includeLoops

                                                A boolean, indicating whether loops are to be included in degree calculations.

                                              nodes.minDegree( ,includeLoops )

                                              Get the minimum degree of the nodes in the collection.

                                              • includeLoops

                                                A boolean, indicating whether loops are to be included in degree calculations.

                                              nodes.maxDegree( ,includeLoops )

                                              Get the maximum degree of the nodes in the collection.

                                              • includeLoops

                                                A boolean, indicating whether loops are to be included in degree calculations.

                                              nodes.minIndegree( ,includeLoops )

                                              Get the minimum indegree of the nodes in the collection.

                                              • includeLoops

                                                A boolean, indicating whether loops are to be included in degree calculations.

                                              nodes.maxIndegree( ,includeLoops )

                                              Get the maximum indegree of the nodes in the collection.

                                              • includeLoops

                                                A boolean, indicating whether loops are to be included in degree calculations.

                                              nodes.minOutdegree( ,includeLoops )

                                              Get the minimum outdegree of the nodes in the collection.

                                              • includeLoops

                                                A boolean, indicating whether loops are to be included in degree calculations.

                                              nodes.maxOutdegree( ,includeLoops )

                                              Get the maximum outdegree of the nodes in the collection.

                                              • includeLoops

                                                A boolean, indicating whether loops are to be included in degree calculations.

                                              Details

                                              Degree : For a node, the degree is the number of edge connections it has. Each time a node is referenced as source or target of an edge in the graph, that counts as an edge connection.

                                              Indegree : For a node, the indegree is the number of incoming edge connections it has. Each time a node is referred to as target of an edge in the graph, that counts as an incoming edge connection.

                                              Outdegree : For a node, the outdegree is the number of outgoing edge connections it has. Each time a node is referred to as source of an edge in the graph, that counts as an outgoing edge connection.

                                              Total degree : For a set of nodes, the the total degree is the total number of edge connections to nodes in the set.

                                              Position & dimensions

                                              node.position()
                                              Aliases: node.modelPosition(),

                                              Get or set the (model) position of a node.

                                              node.position()

                                              Get the entire position object.

                                                node.position( ,dimension )

                                                Get the value of a specified position dimension.

                                                • dimension

                                                  The position dimension to get.

                                                node.position( ,dimension,value )

                                                Set the value of a specified position dimension.

                                                • dimension

                                                  The position dimension to set.

                                                • value

                                                  The value to set to the dimension.

                                                node.position( ,pos )

                                                Set the position using name-value pairs in the specified object.

                                                • pos

                                                  An object specifying name-value pairs representing dimensions to set.

                                                Details

                                                A position has two fields, x and y, that can take on numerical values.

                                                Examples

                                                // get x for j
                                                var x = cy.$('#j').position('x');
                                                
                                                // get the whole position for e
                                                var pos = cy.$('#e').position();
                                                
                                                // set y for j
                                                cy.$('#j').position('y', 100);
                                                
                                                // set multiple
                                                cy.$('#e').position({
                                                  x: 123,
                                                  y: 200
                                                });
                                                
                                                nodes.positions()
                                                Aliases: nodes.modelPositions(),

                                                Set the (model) positions of several nodes with a function.

                                                nodes.positions( ,function(i, ele) )

                                                Set the positions functionally.

                                                • function(i, ele)

                                                  A callback function that returns the position to set for each element.

                                                  • i

                                                    The index of the element when iterating over the elements in the collection.

                                                  • ele

                                                    The element being iterated over for which the function should return a position to set.

                                                nodes.positions( ,pos )

                                                Set positions for all nodes based on a single position object.

                                                • pos

                                                  An object specifying name-value pairs representing dimensions to set.

                                                Examples

                                                cy.nodes().positions(function( i, node ){
                                                  return {
                                                    x: i * 100,
                                                    y: 100
                                                  };
                                                });
                                                
                                                node.renderedPosition()

                                                Get or set the rendered (on-screen) position of a node.

                                                node.renderedPosition()

                                                Get the entire rendered position object.

                                                  node.renderedPosition( ,dimension )

                                                  Get the value of a specified rendered posisition dimension.

                                                  • dimension

                                                    The position dimension to get.

                                                  node.renderedPosition( ,dimension,value )

                                                  Set the value of a specified rendered posisition dimension.

                                                  • dimension

                                                    The position dimension to set.

                                                  • value

                                                    The value to set to the dimension.

                                                  node.renderedPosition( ,pos )

                                                  Set the rendered position using name-value pairs in the specified object.

                                                  • pos

                                                    An object specifying name-value pairs representing dimensions to set.

                                                  ele.width() et al

                                                  Get the width of the element.

                                                  ele.width()

                                                  Get the width of the element.

                                                    ele.outerWidth()

                                                    Get the outer width of the element (includes width & border).

                                                      ele.renderedWidth()

                                                      Get the width of the element in rendered dimensions.

                                                        ele.renderedOuterWidth()

                                                        Get the outer width of the element (includes width & border) in rendered dimensions.

                                                          ele.height() et al

                                                          Get the height of the element.

                                                          ele.height()

                                                          Get the height of the element.

                                                            ele.outerHeight()

                                                            Get the outer height of the element (includes height & border).

                                                              ele.renderedHeight()

                                                              Get the height of the element in rendered dimensions.

                                                                ele.renderedOuterHeight()

                                                                Get the outer height of the element (includes height & border) in rendered dimensions.

                                                                  eles.boundingBox() et al

                                                                  Get the bounding box of the elements.

                                                                  eles.boundingBox( ,options )

                                                                  Get the bounding box of the elements in model coordinates.

                                                                  • options

                                                                    An object containing options for the function.

                                                                    • includeNodes

                                                                      A boolean indicating whether to include nodes in the bounding box.

                                                                    • includeEdges

                                                                      A boolean indicating whether to include edges in the bounding box.

                                                                    • includeLabels

                                                                      A boolean indicating whether to include labels in the bounding box.

                                                                  eles.renderedBoundingBox( ,options )

                                                                  Get the bounding box of the elements in rendered coordinates.

                                                                  • options

                                                                    An object containing options for the function.

                                                                    • includeNodes

                                                                      A boolean indicating whether to include nodes in the bounding box.

                                                                    • includeEdges

                                                                      A boolean indicating whether to include edges in the bounding box.

                                                                    • includeLabels

                                                                      A boolean indicating whether to include labels in the bounding box.

                                                                  Details

                                                                  This function returns a plain object with the fields x1, x2, y1, y2, w, and h defined.

                                                                  node.grabbed()

                                                                  Get whether a node is currently grabbed, meaning the user has hold of the node.

                                                                  node.grabbable()

                                                                  Get whether the user can grab a node.

                                                                  nodes.grabify()

                                                                  Allow the user to grab the nodes.

                                                                  Examples

                                                                  cy.$('#j').grabify();
                                                                  
                                                                  nodes.ungrabify()

                                                                  Disallow the user to grab the nodes.

                                                                  Examples

                                                                  cy.$('#j').ungrabify();
                                                                  
                                                                  node.locked()

                                                                  Get whether a node is locked, meaning that its position can not be changed.

                                                                  nodes.lock()

                                                                  Lock the nodes such that their positions can not be changed.

                                                                  Examples

                                                                  cy.$('#j').lock();
                                                                  
                                                                  nodes.unlock()

                                                                  Unlock the nodes such that their positions can be changed.

                                                                  Examples

                                                                  cy.$('#j').unlock();
                                                                  
                                                                  ele.active()

                                                                  Gets whether the element is active (e.g. on user tap, grab, etc).

                                                                  Layout

                                                                  eles.layout()

                                                                  Run a layout on the elements in the calling collection, algorithmically positioning the nodes.

                                                                  eles.layout( ,options )
                                                                  • options

                                                                    The layout options.

                                                                  Details

                                                                  This function is useful for running a layout on a subset of the elements in the graph.

                                                                  For layouts included with Cytoscape.js, you can find their options documented in the Layouts section. For external layouts, please refer to their accompanying documentation.

                                                                  Examples

                                                                  Run the grid layout:

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

                                                                  Get a new layout, which can be used to algorithmically position the nodes in the collection.

                                                                  eles.makeLayout( ,options )
                                                                  • options

                                                                    The layout options.

                                                                  This function is useful for running a layout on a subset of the elements in the graph, perhaps in parallel to other layouts.

                                                                  You must specify options.name with the name of the layout you wish to use.

                                                                  This function creates and returns a layout object. You may want to keep a reference to the layout for more advanced usecases, such as running multiple layouts simultaneously.

                                                                  Note that you must call layout.run() in order for it to affect the graph.

                                                                  Examples

                                                                  var layout = cy.elements().makeLayout({
                                                                    name: 'random'
                                                                  });
                                                                  
                                                                  layout.run();
                                                                  

                                                                  Selection

                                                                  ele.selected()

                                                                  Get whether the element is selected.

                                                                  eles.select()

                                                                  Make the elements selected (NB other elements outside the collection are not affected).

                                                                  Examples

                                                                  cy.$('#j').select();
                                                                  
                                                                  eles.unselect()

                                                                  Make the elements not selected (NB other elements outside the collection are not affected).

                                                                  Examples

                                                                  cy.$('#j').unselect();
                                                                  
                                                                  ele.selectable()

                                                                  Get whether the element's selection state is mutable.

                                                                  eles.selectify()

                                                                  Make the selection states of the elements mutable.

                                                                  Examples

                                                                  cy.$('#j').unselectify();
                                                                  
                                                                  eles.unselectify()

                                                                  Make the selection states of the elements immutable.

                                                                  Examples

                                                                  cy.$('#j').unselectify();
                                                                  

                                                                  Style

                                                                  eles.addClass()

                                                                  Add classes to elements.

                                                                  eles.addClass( ,classes )
                                                                  • classes

                                                                    A space-separated list of class names to add to the elements.

                                                                  Examples

                                                                  cy.$('#j, #e').addClass('foo');
                                                                  
                                                                  eles.removeClass()

                                                                  Remove classes from elements.

                                                                  eles.removeClass( ,classes )
                                                                  • classes

                                                                    A space-separated list of class names to remove from the elements.

                                                                  Examples

                                                                  cy.$('#j, #e').removeClass('foo');
                                                                  
                                                                  eles.toggleClass()

                                                                  Toggle whether the elements have the specified classes.

                                                                  eles.toggleClass( ,classes [,toggle] )
                                                                  • classes

                                                                    A space-separated list of class names to toggle on the elements.

                                                                  • toggle [optional]

                                                                    Instead of automatically toggling, adds the classes on truthy values or removes them on falsey values.

                                                                  Examples

                                                                  Toggle:

                                                                  cy.$('#j, #e').toggleClass('foo');
                                                                  

                                                                  Toggle on:

                                                                  cy.$('#j, #e').toggleClass('foo', true);
                                                                  

                                                                  Toggle off:

                                                                  cy.$('#j, #e').toggleClass('foo', false);
                                                                  
                                                                  eles.flashClass()

                                                                  Add classes to the elements, and then remove the classes after a specified duration.

                                                                  eles.flashClass( ,classes [,duration] )
                                                                  • classes

                                                                    A space-separated list of class names to flash on the elements.

                                                                  • duration [optional]

                                                                    The duration in milliseconds that the classes should be added on the elements. After the duration, the classes are removed.

                                                                  Examples

                                                                  cy.$('#j, #e').flashClass('foo', 1000);
                                                                  
                                                                  ele.hasClass()

                                                                  Get whether an element has a particular class.

                                                                  ele.hasClass( ,className )
                                                                  • className

                                                                    The name of the class to test for.

                                                                  Examples

                                                                  console.log( 'j has class `foo` : '  + cy.$('#j').hasClass('foo') );
                                                                  
                                                                  eles.css() et al
                                                                  Aliases: eles.style(),

                                                                  Get the style of the element, or override the style of the elements.

                                                                  ele.css()

                                                                  Get a name-value pair object containing visual style properties and their values for the element.

                                                                    ele.css( ,name )

                                                                    Get a particular style property value.

                                                                    • name

                                                                      The name of the visual style property to get.

                                                                    eles.css( ,name,value )

                                                                    Set the specified visual style property for the elements.

                                                                    • name

                                                                      The name of the property to set.

                                                                    • value

                                                                      The value to set to the visual style property.

                                                                    eles.css( ,props )

                                                                    Set several visual style properties at once for the elements.

                                                                    • props

                                                                      An object with name-value pairs representing properties to set on the elements.

                                                                    Details

                                                                    You should use this function very sparingly, because it overrides the style of an element, despite the state and classes that it has. In general, it's much better to specify a better stylesheet at initialisation that reflects your application state rather than programmatically modifying style.

                                                                    Only defined visual style properties are supported.

                                                                    If you would like to remove a particular overridden style property, set null to it.

                                                                    eles.removeCss()
                                                                    Aliases: eles.removeStyle(),

                                                                    Removes overridden style of the elements.

                                                                    eles.removeCss()

                                                                    Removes all overridden style of the elements.

                                                                      eles.removeCss( ,names )

                                                                      Removes particular overridden style properties of the elements.

                                                                      • names

                                                                        A space-separated list of property names for which overridden styles will be removed.

                                                                      ele.renderedCss()
                                                                      Aliases: eles.renderedStyle(),

                                                                      Get the style of the element in rendered dimensions.

                                                                      ele.renderedCss()

                                                                      Get a name-value pair object containing rendered visual style properties and their values for the element.

                                                                        ele.renderedCss( ,name )

                                                                        Get a particular rendered style property value.

                                                                        • name

                                                                          The name of the visual style property to get.

                                                                        eles.show()

                                                                        Override the style of the elements such that they are visible (i.e. display: element).

                                                                        eles.hide()

                                                                        Override the style of the elements such that they are hidden (i.e. display: none).

                                                                        ele.visible() et al

                                                                        Get whether the element is visible (i.e. display: element and visibility: visible).

                                                                        ele.visible()

                                                                        Get whether the element is visible.

                                                                          ele.hidden()

                                                                          Get whether the element is hidden.

                                                                            ele.effectiveOpacity()

                                                                            Get the effective opacity of the element (i.e. on-screen opacity), which takes into consideration parent node opacity.

                                                                            ele.transparent()

                                                                            Get whether the element's effective opacity is completely transparent, which takes into consideration parent node opacity.

                                                                            Animation

                                                                            ele.animated()

                                                                            Get whether the element is currently being animated.

                                                                            eles.animate()

                                                                            Animate the elements.

                                                                            eles.animate( ,props,options )
                                                                            • props

                                                                              An object containing the properties to animate.

                                                                              • position

                                                                                A position to which the elements will be animated.

                                                                              • renderedPosition

                                                                                A rendered position to which the elements will be animated.

                                                                              • css

                                                                                An object containing name-value pairs of style properties to animate.

                                                                            • options

                                                                              An object containing animation options.

                                                                              • duration

                                                                                The duration of the animation in milliseconds.

                                                                              • queue

                                                                                A boolean indicating whether to queue the animation.

                                                                              • complete

                                                                                A function to call when the animation is done.

                                                                              • step

                                                                                A function to call each time the animation steps.

                                                                            Details

                                                                            Note that you can specify only one of position and renderedPosition: You can not animate to two positions at once.

                                                                            Examples

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

                                                                            Add a delay between animations for the elements.

                                                                            eles.delay( ,duration,complete )
                                                                            • duration

                                                                              How long the delay should be in milliseconds.

                                                                            • complete

                                                                              A function to call when the delay is complete.

                                                                            Examples

                                                                            cy.nodes()
                                                                              .animate({
                                                                                  css: { 'background-color': 'blue' }
                                                                                }, {
                                                                                  duration: 1000
                                                                                })
                                                                            
                                                                              .delay( 1000 )
                                                                            
                                                                              .animate({
                                                                                css: { 'background-color': 'yellow' }
                                                                              })
                                                                            ;
                                                                            
                                                                            console.log('Animating nodes...');
                                                                            
                                                                            eles.stop()

                                                                            Stop all animations that are currently running.

                                                                            eles.stop( ,clearQueue,jumpToEnd )
                                                                            • clearQueue

                                                                              A boolean, indicating whether the queue of animations should be emptied.

                                                                            • jumpToEnd

                                                                              A boolean, indicating whether the currently-running animations should jump to their ends rather than just stopping midway.

                                                                            Examples

                                                                            cy.nodes().animate({
                                                                              css: { 'background-color': 'cyan' }
                                                                            }, {
                                                                              duration: 5000,
                                                                              complete: function(){
                                                                                console.log('Animation complete');
                                                                              }
                                                                            });
                                                                            
                                                                            console.log('Animating nodes...');
                                                                            
                                                                            setTimeout(function(){
                                                                              console.log('Stopping nodes animation');
                                                                              cy.nodes().stop();
                                                                            }, 2500);
                                                                            
                                                                            eles.clearQueue()

                                                                            Remove all queued animations for the elements.

                                                                            Comparison

                                                                            eles.same()

                                                                            Determine whether this collection contains exactly the same elements as another collection.

                                                                            eles.same( ,eles )
                                                                            • eles

                                                                              The other elements to compare to.

                                                                            Examples

                                                                            var heavies = cy.$('node[weight > 60]');
                                                                            var guys = cy.$('#j, #g, #k');
                                                                            
                                                                            console.log( 'same ? ' + heavies.same(guys) );
                                                                            
                                                                            eles.anySame()

                                                                            Determine whether this collection contains any of the same elements as another collection.

                                                                            eles.anySame( ,eles )
                                                                            • eles

                                                                              The other elements to compare to.

                                                                            Examples

                                                                            var j = cy.$('#j');
                                                                            var guys = cy.$('#j, #g, #k');
                                                                            
                                                                            console.log( 'any same ? ' + j.anySame(guys) );
                                                                            
                                                                            eles.allAreNeighbors()

                                                                            Determine whether all elements in the specified collection are in the neighbourhood of the calling collection.

                                                                            eles.allAreNeighbors( ,eles )
                                                                            • eles

                                                                              The other elements to compare to.

                                                                            Examples

                                                                            var j = cy.$('#j');
                                                                            var gAndK = cy.$('#g, #k');
                                                                            
                                                                            console.log( 'all neighbours ? ' + j.allAreNeighbors(gAndK) );
                                                                            
                                                                            eles.is()

                                                                            Determine whether any element in this collection matches a selector.

                                                                            eles.is( ,selector )

                                                                            Examples

                                                                            var j = cy.$('#j');
                                                                            
                                                                            console.log( 'j has weight > 50 ? ' + j.is('[weight > 50]') );
                                                                            
                                                                            eles.allAre()

                                                                            Determine whether all elements in the collection match a selector.

                                                                            eles.allAre( ,selector )

                                                                            Examples

                                                                            var jAndE = cy.$('#j, #e');
                                                                            
                                                                            console.log( 'j and e all have weight > 50 ? ' + jAndE.allAre('[weight > 50]') );
                                                                            
                                                                            eles.some()

                                                                            Determine whether any element in this collection satisfies the specified test function.

                                                                            eles.some( ,function(ele, i, eles) [,thisArg] )
                                                                            • function(ele, i, eles)

                                                                              The test function that returns truthy values for elements that satisfy the test and falsey values for elements that do not satisfy the test.

                                                                              • ele

                                                                                The current element.

                                                                              • i

                                                                                The index of the current element.

                                                                              • eles

                                                                                The collection of elements being tested.

                                                                            • thisArg [optional]

                                                                              The value for this within the test function.

                                                                            Examples

                                                                            var jAndE = cy.$('#j, #e');
                                                                            var someHeavierThan50 = jAndE.some(function( ele ){
                                                                              return ele.data('weight') > 50;
                                                                            });
                                                                            
                                                                            console.log( 'some heavier than 50 ? ' + someHeavierThan50 );
                                                                            
                                                                            eles.every()

                                                                            Determine whether all elements in this collection satisfy the specified test function.

                                                                            eles.every( ,function(ele, i, eles) [,thisArg] )
                                                                            • function(ele, i, eles)

                                                                              The test function that returns truthy values for elements that satisfy the test and falsey values for elements that do not satisfy the test.

                                                                              • ele

                                                                                The current element.

                                                                              • i

                                                                                The index of the current element.

                                                                              • eles

                                                                                The collection of elements being tested.

                                                                            • thisArg [optional]

                                                                              The value for this within the test function.

                                                                            Examples

                                                                            var jAndE = cy.$('#j, #e');
                                                                            var everyHeavierThan50 = jAndE.every(function( ele ){
                                                                              return ele.data('weight') > 50;
                                                                            });
                                                                            
                                                                            console.log( 'every heavier than 50 ? ' + everyHeavierThan50 );
                                                                            

                                                                            Iteration

                                                                            eles.size()

                                                                            Get the number of elements in the collection.

                                                                            Details

                                                                            Note that as an alternative, you may read eles.length instead of eles.size(). The two are interchangeable.

                                                                            eles.empty() et al

                                                                            Get whether the collection is empty, meaning it has no elements.

                                                                            eles.empty()

                                                                            Get whether the collection is empty.

                                                                              eles.nonempty()

                                                                              Get whether the collection is nonempty.

                                                                                eles.each()

                                                                                Iterate over the elements in the collection.

                                                                                eles.each( ,function(i, ele) )
                                                                                • function(i, ele)

                                                                                  The function executed each iteration.

                                                                                  • i

                                                                                    The index of the element in the collection.

                                                                                  • ele

                                                                                    The element at the current index.

                                                                                Details

                                                                                This function behaves like the jQuery .each() function. For a more standard implementation, you may want to use eles.forEach().

                                                                                Note that although this function is convenient in some cases, it is less efficient than making your own loop:

                                                                                var eles = cy.elements();
                                                                                for( var i = 0; i < eles.length; i++ ){
                                                                                    var ele = ele[i];
                                                                                
                                                                                    console.log( ele.id() + ' is ' + ( ele.selected() ? 'selected' : 'not selected' ) );
                                                                                }
                                                                                

                                                                                Examples

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

                                                                                Iterate over the elements in the collection using an implementation like the native array function namesake.

                                                                                eles.forEach( ,function(ele, i, eles) [,thisArg] )
                                                                                • function(ele, i, eles)

                                                                                  The function executed each iteration.

                                                                                  • ele

                                                                                    The current element.

                                                                                  • i

                                                                                    The index of the current element.

                                                                                  • eles

                                                                                    The collection of elements being iterated.

                                                                                • thisArg [optional]

                                                                                  The value for this within the iterating function.

                                                                                Details

                                                                                This function behaves like Array.prototype.forEach() with minor changes for convenience:

                                                                                • You can exit the iteration early by returning false in the iterating function. The Array.prototype.forEach() implementation does not support this, but it is included anyway on account of its utility.

                                                                                Examples

                                                                                // print all the ids of the nodes in the graph
                                                                                cy.nodes().forEach(function( ele ){
                                                                                  console.log( ele.id() );
                                                                                });
                                                                                
                                                                                eles.eq() et al

                                                                                Get an element at a particular index in the collection.

                                                                                eles.eq( ,index )
                                                                                • index

                                                                                  The index of the element to get.

                                                                                eles.first()

                                                                                Get the first element in the collection.

                                                                                  eles.last()

                                                                                  Get the last element in the collection.

                                                                                    Details

                                                                                    You may use eles[i] in place of eles.eq(i) as a more performant alternative.

                                                                                    eles.slice()

                                                                                    Get a subset of the elements in the collection based on specified indices.

                                                                                    eles.slice( [,start] [,end] )
                                                                                    • start [optional]

                                                                                      An integer that specifies where to start the selection. The first element has an index of 0. Use negative numbers to select from the end of an array.

                                                                                    • end [optional]

                                                                                      An integer that specifies where to end the selection. If omitted, all elements from the start position and to the end of the array will be selected. Use negative numbers to select from the end of an array.

                                                                                    Building & filtering

                                                                                    eles.add()

                                                                                    Get a new collection, resulting from adding the collection with another one

                                                                                    eles.add( ,eles )
                                                                                    • eles

                                                                                      The elements to add.

                                                                                    eles.add( ,elesArray )
                                                                                    eles.add( ,selector )
                                                                                    • selector

                                                                                      Elements in the graph matching this selector are added.

                                                                                    Examples

                                                                                    With a collection:

                                                                                    var j = cy.$('#j');
                                                                                    var e = cy.$('#e');
                                                                                    
                                                                                    j.add(e);
                                                                                    

                                                                                    With a selector:

                                                                                    cy.$('#j').add('#e');
                                                                                    
                                                                                    eles.not()

                                                                                    Get a new collection, resulting from the collection without some specified elements.

                                                                                    eles.not( ,eles )
                                                                                    • eles

                                                                                      The elements that will not be in the resultant collection.

                                                                                    eles.not( ,selector )
                                                                                    • selector

                                                                                      Elements from the calling collection matching this selector will not be in the resultant collection.

                                                                                    Examples

                                                                                    With a collection:

                                                                                    var j = cy.$('#j');
                                                                                    var nodes = cy.nodes();
                                                                                    
                                                                                    nodes.not(j);
                                                                                    

                                                                                    With a selector:

                                                                                    cy.nodes().not('#j');
                                                                                    
                                                                                    eles.intersect()

                                                                                    Get the elements in both this collection and another specified collection.

                                                                                    eles.intersect( ,eles )
                                                                                    • eles

                                                                                      The elements to intersect with.

                                                                                    eles.intersect( ,selector )
                                                                                    • selector

                                                                                      A selector representing the elements to intersect with. All elements in the graph matching the selector are used as the passed collection.

                                                                                    Examples

                                                                                    var jNhd = cy.$('#j').neighborhood();
                                                                                    var eNhd = cy.$('#e').neighborhood();
                                                                                    
                                                                                    jNhd.intersect( eNhd );
                                                                                    
                                                                                    eles.filter() et al

                                                                                    Get a new collection containing elements that are accepted by the specified filter.

                                                                                    eles.filter( ,selector )

                                                                                    Get the elements that match the specified selector.

                                                                                    eles.filter( ,function(i, ele) )

                                                                                    Get the elements that match the specified filter function.

                                                                                    • function(i, ele)

                                                                                      The filter function that returns true for elements to include.

                                                                                      • i

                                                                                        The index of the current element being considered.

                                                                                      • ele

                                                                                        The element being considered.

                                                                                    eles.nodes( ,selector )

                                                                                    Get the nodes that match the specified selector.

                                                                                    eles.edges( ,selector )

                                                                                    Get the edges that match the specified selector.

                                                                                    Examples

                                                                                    cy.nodes().filter('[weight > 50]');
                                                                                    
                                                                                    eles.stdFilter()

                                                                                    Get a new collection containing elements that are accepted by the specified filter, using an implementation like the standard array namesake.

                                                                                    eles.stdFilter( ,function(ele, i, eles) [,thisArg] )
                                                                                    • function(ele, i, eles)

                                                                                      The filter function that returns truthy values for elements to include and falsey values for elements to exclude.

                                                                                      • ele

                                                                                        The current element.

                                                                                      • i

                                                                                        The index of the current element.

                                                                                      • eles

                                                                                        The collection of elements being filtered.

                                                                                    • thisArg [optional]

                                                                                      The value for this within the iterating function.

                                                                                    Examples

                                                                                    cy.nodes().stdFilter(function( ele ){
                                                                                      return ele.data('weight') > 50;
                                                                                    });
                                                                                    
                                                                                    eles.sort()

                                                                                    Get a new collection containing the elements sorted by the specified comparison function.

                                                                                    eles.sort( ,function(ele1, ele2) )
                                                                                    • function(ele1, ele2)

                                                                                      The sorting comparison function that returns a negative number for ele1 before ele2, 0 for ele1 same as ele2, or a positive number for ele1 after ele2.

                                                                                    Examples

                                                                                    Get collection of nodes in order of increasing weight:

                                                                                    var nodes = cy.nodes().sort(function( a, b ){
                                                                                      return a.data('weight') > b.data('weight');
                                                                                    });
                                                                                    
                                                                                    // show order via animations
                                                                                    var duration = 1000;
                                                                                    nodes.removeCss().forEach(function( node, i ){
                                                                                      node.delay( i * duration ).animate({
                                                                                        css: {
                                                                                          'border-width': 4,
                                                                                          'border-color': 'green'
                                                                                        }
                                                                                      }, { duration: duration });
                                                                                    });
                                                                                    
                                                                                    console.log('Animating nodes to show sorted order');
                                                                                    
                                                                                    eles.map()

                                                                                    Get an array containing values mapped from the collection.

                                                                                    eles.map( ,function(ele, i, eles) [,thisArg] )
                                                                                    • function(ele, i, eles)

                                                                                      The function that returns the mapped value for each element.

                                                                                      • ele

                                                                                        The current element.

                                                                                      • i

                                                                                        The index of the current element.

                                                                                      • eles

                                                                                        The collection of elements being mapped.

                                                                                    • thisArg [optional]

                                                                                      The value for this within the iterating function.

                                                                                    Examples

                                                                                    Get an array of node weights:

                                                                                    var weights = cy.nodes().map(function( ele ){
                                                                                      return ele.data('weight');
                                                                                    });
                                                                                    
                                                                                    console.log(map);
                                                                                    
                                                                                    eles.min()

                                                                                    Find a minimum value in a collection.

                                                                                    eles.min( ,function(ele, i, eles) [,thisArg] )
                                                                                    • function(ele, i, eles)

                                                                                      The function that returns the value to compare for each element.

                                                                                      • ele

                                                                                        The current element.

                                                                                      • i

                                                                                        The index of the current element.

                                                                                      • eles

                                                                                        The collection of elements being searched.

                                                                                    • thisArg [optional]

                                                                                      The value for this within the iterating function.

                                                                                    Details

                                                                                    This function returns an object with the following fields:

                                                                                    • value : The minimum value found.
                                                                                    • ele : The element that corresponds to the minimum value.

                                                                                    Examples

                                                                                    Find the node with the minimum weight:

                                                                                    var min = cy.nodes().min(function(){
                                                                                      return this.data('weight');
                                                                                    });
                                                                                    
                                                                                    console.log( 'min val: ' + min.value + ' for element ' + min.ele.id() );
                                                                                    
                                                                                    eles.max()

                                                                                    Find a maximum value and the corresponding element.

                                                                                    eles.max( ,function(ele, i, eles) [,thisArg] )
                                                                                    • function(ele, i, eles)

                                                                                      The function that returns the value to compare for each element.

                                                                                      • ele

                                                                                        The current element.

                                                                                      • i

                                                                                        The index of the current element.

                                                                                      • eles

                                                                                        The collection of elements being searched.

                                                                                    • thisArg [optional]

                                                                                      The value for this within the iterating function.

                                                                                    Details

                                                                                    This function returns an object with the following fields:

                                                                                    • value : The maximum value found.
                                                                                    • ele : The element that corresponds to the maximum value.

                                                                                    Examples

                                                                                    Find the node with the maximum weight:

                                                                                    var max = cy.nodes().max(function(){
                                                                                      return this.data('weight');
                                                                                    });
                                                                                    
                                                                                    console.log( 'max val: ' + max.value + ' for element ' + max.ele.id() );
                                                                                    

                                                                                    Traversing

                                                                                    eles.neighborhood() et al

                                                                                    Get the neighbourhood of the elements.

                                                                                    eles.neighborhood( [,selector] )

                                                                                    Get the open neighbourhood of the elements.

                                                                                    • selector [optional]

                                                                                      An optional selector that is used to filter the resultant collection.

                                                                                    eles.openNeighborhood( [,selector] )

                                                                                    Get the open neighbourhood of the elements.

                                                                                    • selector [optional]

                                                                                      An optional selector that is used to filter the resultant collection.

                                                                                    eles.closedNeighborhood( [,selector] )

                                                                                    Get the closed neighbourhood of the elements.

                                                                                    • selector [optional]

                                                                                      An optional selector that is used to filter the resultant collection.

                                                                                    Details

                                                                                    The neighbourhood returned by this function is a bit different than the traditional definition of a "neighbourhood": This returned neighbourhood includes the edges connecting the collection to the neighbourhood. This gives you more flexibility.

                                                                                    An open neighbourhood is one that does not include the original set of elements. If unspecified, a neighbourhood is open by default.

                                                                                    A closed neighbourhood is one that does include the original set of elements.

                                                                                    Examples

                                                                                    cy.$('#j').neighborhood();
                                                                                    
                                                                                    nodes.edgesWith()

                                                                                    Get the edges connecting the collection to another collection. Direction of the edges does not matter.

                                                                                    nodes.edgesWith( ,eles )
                                                                                    • eles

                                                                                      The other collection.

                                                                                    nodes.edgesWith( ,selector )
                                                                                    • selector

                                                                                      The other collection, specified as a selector which is matched against all elements in the graph.

                                                                                    Examples

                                                                                    var j = cy.$('#j');
                                                                                    var e = cy.$('#e');
                                                                                    
                                                                                    j.edgesWith(e);
                                                                                    
                                                                                    nodes.edgesTo()

                                                                                    Get the edges coming from the collection (i.e. the source) going to another collection (i.e. the target).

                                                                                    nodes.edgesTo( ,eles )
                                                                                    • eles

                                                                                      The other collection.

                                                                                    nodes.edgesTo( ,selector )
                                                                                    • selector

                                                                                      The other collection, specified as a selector which is matched against all elements in the graph.

                                                                                    Examples

                                                                                    var j = cy.$('#j');
                                                                                    var e = cy.$('#e');
                                                                                    
                                                                                    j.edgesTo(e);
                                                                                    
                                                                                    edges.connectedNodes()

                                                                                    Get the nodes connected to the edges in the collection.

                                                                                    edges.connectedNodes( [,selector] )
                                                                                    • selector [optional]

                                                                                      An optional selector that is used to filter the resultant collection.

                                                                                    Examples

                                                                                    var je = cy.$('#je');
                                                                                    
                                                                                    je.connectedNodes();
                                                                                    
                                                                                    nodes.connectedEdges()

                                                                                    Get the edges connected to the nodes in the collection.

                                                                                    nodes.connectedEdges( [,selector] )
                                                                                    • selector [optional]

                                                                                      An optional selector that is used to filter the resultant collection.

                                                                                    Examples

                                                                                    var j = cy.$('#j');
                                                                                    
                                                                                    j.connectedEdges();
                                                                                    
                                                                                    edge.source()

                                                                                    Get source node of this edge.

                                                                                    edge.source( [,selector] )
                                                                                    • selector [optional]

                                                                                      An optional selector that is used to filter the resultant collection.

                                                                                    Examples

                                                                                    var je = cy.$('#je');
                                                                                    
                                                                                    je.source();
                                                                                    
                                                                                    edges.sources()

                                                                                    Get source nodes connected to the edges in the collection.

                                                                                    edges.sources( [,selector] )
                                                                                    • selector [optional]

                                                                                      An optional selector that is used to filter the resultant collection.

                                                                                    Examples

                                                                                    var edges = cy.$('#je, #kg');
                                                                                    
                                                                                    edges.sources();
                                                                                    
                                                                                    edge.target()

                                                                                    Get target node of this edge.

                                                                                    edge.target( [,selector] )
                                                                                    • selector [optional]

                                                                                      An optional selector that is used to filter the resultant collection.

                                                                                    Examples

                                                                                    var je = cy.$('#je');
                                                                                    
                                                                                    je.target();
                                                                                    
                                                                                    edges.targets()

                                                                                    Get target nodes connected to the edges in the collection.

                                                                                    edges.targets( [,selector] )
                                                                                    • selector [optional]

                                                                                      An optional selector that is used to filter the resultant collection.

                                                                                    Examples

                                                                                    var edges = cy.$('#je, #kg');
                                                                                    
                                                                                    edges.targets();
                                                                                    
                                                                                    edges.parallelEdges()

                                                                                    Get edges parallel to those in the collection.

                                                                                    edges.parallelEdges( [,selector] )
                                                                                    • selector [optional]

                                                                                      An optional selector that is used to filter the resultant collection.

                                                                                    Details

                                                                                    Two edges are said to be parallel if they connect the same two nodes. Any two parallel edges may connect nodes in the same direction, in which case the edges share the same source and target. They may alternatively connect nodes in the opposite direction, in which case the source and target are reversed in the second edge.

                                                                                    That is,

                                                                                    • edge1.source().id() === edge2.source().id() && edge1.target().id() === edge2.target().id() or
                                                                                    • edge1.source().id() === edge2.target().id() && edge1.target().id() === edge2.source().id().

                                                                                    Examples

                                                                                    cy.$('#je').parallelEdges();
                                                                                    
                                                                                    edges.codirectedEdges()

                                                                                    Get edges codirected to those in the collection.

                                                                                    edges.codirectedEdges( [,selector] )
                                                                                    • selector [optional]

                                                                                      An optional selector that is used to filter the resultant collection.

                                                                                    Details

                                                                                    Two edges are said to be codirected if they connect the same two nodes in the same direction: The edges have the same source and target.

                                                                                    That is, edge1.source().id() === edge2.source().id() && edge1.target().id() === edge2.target().id().

                                                                                    Examples

                                                                                    cy.$('#je').codirectedEdges(); // only self in this case
                                                                                    
                                                                                    nodes.roots()

                                                                                    From the set of calling nodes, get the nodes which are roots (i.e. no incoming edges, as in a directed acyclic graph).

                                                                                    nodes.roots( [,selector] )
                                                                                    • selector [optional]

                                                                                      An optional selector that is used to filter the resultant collection.

                                                                                    nodes.leaves()

                                                                                    From the set of calling nodes, get the nodes which are leaves (i.e. no outgoing edges, as in a directed acyclic graph).

                                                                                    nodes.leaves( [,selector] )
                                                                                    • selector [optional]

                                                                                      An optional selector that is used to filter the resultant collection.

                                                                                    nodes.outgoers()

                                                                                    Get edges (and their targets) coming out of the nodes in the collection.

                                                                                    nodes.outgoers( [,selector] )
                                                                                    • selector [optional]

                                                                                      An optional selector that is used to filter the resultant collection.

                                                                                    Examples

                                                                                    Get outgoers of j:

                                                                                    cy.$('#j').outgoers();
                                                                                    
                                                                                    nodes.successors()

                                                                                    Recursively get edges (and their targets) coming out of the nodes in the collection (i.e. the outgoers, the outgoers' outgoers, ...).

                                                                                    nodes.successors( [,selector] )
                                                                                    • selector [optional]

                                                                                      An optional selector that is used to filter the resultant collection.

                                                                                    Examples

                                                                                    Get successors of j:

                                                                                    cy.$('#j').successors();
                                                                                    
                                                                                    nodes.incomers()

                                                                                    Get edges (and their sources) coming into the nodes in the collection.

                                                                                    nodes.incomers( [,selector] )
                                                                                    • selector [optional]

                                                                                      An optional selector that is used to filter the resultant collection.

                                                                                    Examples

                                                                                    Get incomers of j:

                                                                                    cy.$('#j').incomers();
                                                                                    
                                                                                    nodes.predecessors()

                                                                                    Recursively get edges (and their sources) coming into the nodes in the collection (i.e. the incomers, the incomers' incomers, ...).

                                                                                    nodes.predecessors( [,selector] )
                                                                                    • selector [optional]

                                                                                      An optional selector that is used to filter the resultant collection.

                                                                                    Examples

                                                                                    Get predecessors of j:

                                                                                    cy.$('#j').predecessors();
                                                                                    

                                                                                    Algorithms

                                                                                    eles.breadthFirstSearch()
                                                                                    Aliases: eles.bfs(),

                                                                                    Perform a breadth-first search within the elements in the collection.

                                                                                    eles.breadthFirstSearch( ,options )
                                                                                    • options
                                                                                      • roots

                                                                                        The root nodes (selector or collection) to start the search from.

                                                                                      • visit: function(i, depth) [optional]

                                                                                        A handler function that is called when a node is visited in the search. The handler returns true when it finds the desired node, and it returns false to cancel the search.

                                                                                        • i

                                                                                          The index indicating this node is the ith visited node.

                                                                                        • depth

                                                                                          How many edge hops away this node is from the root nodes.

                                                                                      • directed [optional]

                                                                                        A boolean indicating whether the algorithm should only go along edges from source to target (default false).

                                                                                    eles.breadthFirstSearch( ,roots [,function(i, depth)] [,directed] )
                                                                                    • roots

                                                                                      The root nodes (selector or collection) to start the search from.

                                                                                    • function(i, depth) [optional]

                                                                                      A handler function that is called when a node is visited in the search. The handler returns true when it finds the desired node, and it returns false to cancel the search.

                                                                                      • i

                                                                                        The index indicating this node is the ith visited node.

                                                                                      • depth

                                                                                        How many edge hops away this node is from the root nodes.

                                                                                    • directed [optional]

                                                                                      A boolean indicating whether the search should only go along edges from source to target (default false).

                                                                                    Details

                                                                                    Note that this function performs a breadth-first search on only the subset of the graph in the calling collection.

                                                                                    This function returns an object that contains two collections ({ path: eles, found: node }), the node found by the search and the path of the search:

                                                                                    • If no node was found, then found is empty.
                                                                                    • If your handler function returns false, then the only the path up to that point is returned.
                                                                                    • The path returned includes edges such that if path[i] is a node, then path[i - 1] is the edge used to get to that node.

                                                                                    Examples

                                                                                    var bfs = cy.elements().bfs('#e', function(i, depth){
                                                                                      console.log( 'visit ' + this.id() );
                                                                                    
                                                                                      // example of finding desired node
                                                                                      if( this.data('weight') > 70 ){
                                                                                        return true;
                                                                                      }
                                                                                    
                                                                                      // example of exiting search early
                                                                                      if( this.data('weight') < 0 ){
                                                                                        return false;
                                                                                      }
                                                                                    }, false);
                                                                                    
                                                                                    var path = bfs.path; // path to found node
                                                                                    var found = bfs.found; // found node
                                                                                    
                                                                                    // select the path
                                                                                    path.select();
                                                                                    
                                                                                    eles.depthFirstSearch()
                                                                                    Aliases: eles.dfs(),

                                                                                    Perform a depth-first search within the elements in the collection.

                                                                                    eles.depthFirstSearch( ,options )
                                                                                    • options
                                                                                      • roots

                                                                                        The root nodes (selector or collection) to start the search from.

                                                                                      • visit: function(i, depth) [optional]

                                                                                        A handler function that is called when a node is visited in the search. The handler returns true when it finds the desired node, and it returns false to cancel the search.

                                                                                        • i

                                                                                          The index indicating this node is the ith visited node.

                                                                                        • depth

                                                                                          How many edge hops away this node is from the root nodes.

                                                                                      • directed [optional]

                                                                                        A boolean indicating whether the algorithm should only go along edges from source to target (default false).

                                                                                    eles.depthFirstSearch( ,roots [,function(i, depth)] [,directed] )
                                                                                    • roots

                                                                                      The root nodes (selector or collection) to start the search from.

                                                                                    • function(i, depth) [optional]

                                                                                      A handler function that is called when a node is visited in the search. The handler returns true when it finds the desired node, and it returns false to cancel the search.

                                                                                      • i

                                                                                        The index indicating this node is the ith visited node.

                                                                                      • depth

                                                                                        How many edge hops away this node is from the root nodes.

                                                                                    • directed [optional]

                                                                                      A boolean indicating whether the search should only go along edges from source to target (default false).

                                                                                    Details

                                                                                    Note that this function performs a depth-first search on only the subset of the graph in the calling collection.

                                                                                    This function returns an object that contains two collections ({ path: eles, found: node }), the node found by the search and the path of the search:

                                                                                    • If no node was found, then found is empty.
                                                                                    • If your handler function returns false, then the only the path up to that point is returned.
                                                                                    • The path returned includes edges such that if path[i] is a node, then path[i - 1] is the edge used to get to that node.

                                                                                    Examples

                                                                                    var dfs = cy.elements().dfs('#e', function(i, depth){
                                                                                      console.log( 'visit ' + this.id() );
                                                                                    
                                                                                      // example of finding desired node
                                                                                      if( this.data('weight') > 70 ){
                                                                                        return true;
                                                                                      }
                                                                                    
                                                                                      // example of exiting search early
                                                                                      if( this.data('weight') < 0 ){
                                                                                        return false;
                                                                                      }
                                                                                    }, false);
                                                                                    
                                                                                    var path = dfs.path; // path to found node
                                                                                    var found = dfs.found; // found node
                                                                                    
                                                                                    // select the path
                                                                                    path.select();
                                                                                    
                                                                                    eles.dijkstra()

                                                                                    Perform Dijkstra's algorithm on the elements in the collection. This finds the shortest paths to all other nodes in the collection from the root node.

                                                                                    eles.dijkstra( ,options )
                                                                                    • options
                                                                                      • root

                                                                                        The root node (selector or collection) where the algorithm starts.

                                                                                      • weight: function(edge) [optional]

                                                                                        A function that returns the positive numeric weight for this edge.

                                                                                      • directed [optional]

                                                                                        A boolean indicating whether the algorithm should only go along edges from source to target (default false).

                                                                                    eles.dijkstra( ,root [,function(edge)] [,directed] )
                                                                                    • root

                                                                                      The root node (selector or collection) where the algorithm starts.

                                                                                    • function(edge) [optional]

                                                                                      A function that returns the positive numeric weight for this edge.

                                                                                    • directed [optional]

                                                                                      A boolean indicating whether the algorithm should only go along edges from source to target (default false).

                                                                                    Details

                                                                                    Note that this function performs Dijkstra's algorithm on only the subset of the graph in the calling collection.

                                                                                    This function returns an object of the following form:

                                                                                    {
                                                                                      distanceTo: function( node ){ /* impl */ }
                                                                                      pathTo: function( node ){ /* impl */ }
                                                                                    }
                                                                                    

                                                                                    distanceTo(node) returns the distance from the source node to node, and pathTo(node) returns a collection containing the shortest path from the source node to node. The path starts with the source node and includes the edges between the nodes in the path such that if pathTo(node)[i] is an edge, then pathTo(node)[i-1] is the previous node in the path and pathTo(node)[i+1] is the next node in the path.

                                                                                    If no weight function is defined, a constant weight of 1 is used for each edge.

                                                                                    Examples

                                                                                    var dijkstra = cy.elements().dijkstra('#e', function(){
                                                                                      return this.data('weight');
                                                                                    });
                                                                                    
                                                                                    var pathToJ = dijkstra.pathTo( cy.$('#j') );
                                                                                    var distToJ = dijkstra.distanceTo( cy.$('#j') );
                                                                                    
                                                                                    eles.aStar()

                                                                                    Perform the A* search algorithm on the elements in the collection. This finds the shortest path from the root node to the goal node.

                                                                                    eles.aStar( ,options )
                                                                                    • options
                                                                                      • root

                                                                                        The root node (selector or collection) where the search starts.

                                                                                      • goal

                                                                                        The goal node (selector or collection) where the search ends.

                                                                                      • weight: function(edge) [optional]

                                                                                        A function that returns the positive numeric weight for this edge.

                                                                                      • heuristic: function(node) [optional]

                                                                                        A function that returns an estimation (cannot be overestimation) on the shortest distance from the current (this) node to the goal.

                                                                                      • directed [optional]

                                                                                        A boolean indicating whether the algorithm should only go along edges from source to target (default false).

                                                                                    Details

                                                                                    Note that this function performs A* search on only the subset of the graph in the calling collection.

                                                                                    This function returns an object of the following form:

                                                                                    {
                                                                                      found, /* true or false */
                                                                                      distance, /* Distance of the shortest path, if found */
                                                                                      path /* Ordered collection of elements in the shortest path, if found */
                                                                                    }
                                                                                    

                                                                                    Regarding optional options:

                                                                                    • If no weight function is defined, a constant weight of 1 is used for each edge.
                                                                                    • If no heuristic function is provided, a constant null function will be used, turning this into the same behaviour as Dijkstra's algorithm. The heuristic should be monotonic (also called consistent) in addition to being 'admissible'.

                                                                                    Examples

                                                                                    var aStar = cy.elements().aStar({ root: "#j", goal: "#e" });
                                                                                    
                                                                                    aStar.path.select();
                                                                                    
                                                                                    eles.floydWarshall()

                                                                                    Perform Floyd Warshall search algorithm on the elements in the collection. This finds the shortest path between all pairs of nodes.

                                                                                    eles.floydWarshall( ,options )
                                                                                    • options
                                                                                      • weight: function(edge) [optional]

                                                                                        A function that returns the positive numeric weight for this edge.

                                                                                      • directed [optional]

                                                                                        A boolean indicating whether the algorithm should only go along edges from source to target (default false).

                                                                                    Details

                                                                                    This function returns an object of the following form:

                                                                                    {
                                                                                      /* function that computes the shortest path between 2 nodes 
                                                                                      (either objects or selector strings) */
                                                                                      path: function( fromNode, toNode ){ /* impl */ }, 
                                                                                    
                                                                                      /* function that computes the shortest distance between 2 nodes 
                                                                                      (either objects or selector strings) */
                                                                                      distance: function( fromNode, toNode ){ /* impl */ }
                                                                                    }
                                                                                    

                                                                                    If no weight function is defined, a constant weight of 1 is used for each edge.

                                                                                    Examples

                                                                                    var fw = cy.elements().floydWarshall();
                                                                                    
                                                                                    fw.path('#k', '#g').select();
                                                                                    
                                                                                    eles.bellmanFord()

                                                                                    Perform Bellman-Ford search algorithm on the elements in the collection. This finds the shortest path from the starting node to all other nodes in the collection.

                                                                                    eles.bellmanFord( ,options )
                                                                                    • options
                                                                                      • root

                                                                                        The root node (selector or collection) where the search starts.

                                                                                      • weight: function(edge) [optional]

                                                                                        A function that returns the positive numeric weight for this edge.

                                                                                      • directed [optional]

                                                                                        A boolean indicating whether the algorithm should only go along edges from source to target (default false).

                                                                                    Details

                                                                                    This function returns an object of the following form:

                                                                                    {
                                                                                      /* function that computes the shortest path from root node to the argument node
                                                                                      (either objects or selector string) */
                                                                                      pathTo: function(node){ /* impl */ }, 
                                                                                    
                                                                                      /* function that computes the shortest distance from root node to argument node
                                                                                      (either objects or selector string) */
                                                                                      distanceTo: function(node){ /* impl */ }, 
                                                                                    
                                                                                      /* true/false. If true, pathTo and distanceTo will be undefined */
                                                                                      hasNegativeWeightCycle 
                                                                                    }
                                                                                    

                                                                                    If no weight function is defined, a constant weight of 1 is used for each edge.

                                                                                    The Bellman-Ford algorithm is good at detecting negative weight cycles, but it can not return path or distance results if it finds them.

                                                                                    Examples

                                                                                    var bf = cy.elements().bellmanFord({ root: "#j" });
                                                                                    
                                                                                    bf.pathTo('#g').select();
                                                                                    
                                                                                    eles.kruskal()

                                                                                    Perform Kruskal's algorithm on the elements in the collection, returning the minimum spanning tree, assuming undirected edges.

                                                                                    eles.kruskal( [,function(edge)] )
                                                                                    • function(edge) [optional]

                                                                                      A function that returns the positive numeric weight for this edge.

                                                                                    Details

                                                                                    Note that this function runs Kruskal's algorithm on the subset of the graph in the calling collection.

                                                                                    Examples

                                                                                    cy.elements().kruskal();
                                                                                    
                                                                                    eles.kargerStein()

                                                                                    Finds the minimum cut in a graph using the Karger-Stein algorithm. The optimal result is found with a high probability, but without guarantee.

                                                                                    Details

                                                                                    This function returns an object of the following form:

                                                                                    {
                                                                                      cut, /* Collection of edges that are in the cut */
                                                                                      partition1, /* Collection of nodes that are in the first partition */
                                                                                      partition2 /* Collection of nodes that are in the second partition */
                                                                                    }
                                                                                    

                                                                                    Examples

                                                                                    var ks = cy.elements().kargerStein();
                                                                                    
                                                                                    ks.cut.select();
                                                                                    
                                                                                    eles.pageRank()

                                                                                    Rank the nodes in the collection using the Page Rank algorithm.

                                                                                    eles.pageRank( ,options )
                                                                                    • options
                                                                                      • dampingFactor [optional]

                                                                                        Numeric parameter for the algorithm.

                                                                                      • precision [optional]

                                                                                        Numeric parameter that represents the required precision.

                                                                                      • iterations [optional]

                                                                                        Maximum number of iterations to perform.

                                                                                    Details

                                                                                    This function returns an object of the following form:

                                                                                    {
                                                                                      rank /* function that computes the rank of a given node (either object or selector string) */
                                                                                    }
                                                                                    

                                                                                    Examples

                                                                                    var pr = cy.elements().pageRank();
                                                                                    
                                                                                    console.log('g rank: ' + pr.rank('#g'));
                                                                                    

                                                                                    Compound nodes

                                                                                    These functions apply to compound graphs.

                                                                                    node.isParent()

                                                                                    Get whether the node is a compound parent (i.e. a node containing one or more child nodes)

                                                                                    node.isChild()

                                                                                    Get whether the node is a compound child (i.e. contained within a node)

                                                                                    nodes.parent()

                                                                                    Get the compound parent node of each node in the collection.

                                                                                    nodes.parent( [,selector] )
                                                                                    • selector [optional]

                                                                                      A selector used to filter the resultant collection.

                                                                                    nodes.parents()
                                                                                    Aliases: nodes.ancestors(),

                                                                                    Get all compound ancestor nodes (i.e. parents, parents' parents, etc.) of each node in the collection.

                                                                                    nodes.parents( [,selector] )
                                                                                    • selector [optional]

                                                                                      A selector used to filter the resultant collection.

                                                                                    nodes.commonAncestors()

                                                                                    Get all compound ancestors common to all the nodes in the collection, starting with the closest and getting progressively farther.

                                                                                    nodes.commonAncestors( [,selector] )
                                                                                    • selector [optional]

                                                                                      A selector used to filter the resultant collection.

                                                                                    Details

                                                                                    You can get the closest common ancestor via nodes.commonAncestors().first() and the farthest via nodes.commonAncestors().last(), because the common ancestors are in descending order of closeness.

                                                                                    nodes.orphans()

                                                                                    Get all orphan (i.e. has no compound parent) nodes in the calling collection.

                                                                                    nodes.orphans( [,selector] )
                                                                                    • selector [optional]

                                                                                      A selector used to filter the resultant collection.

                                                                                    nodes.nonorphans()

                                                                                    Get all nonorphan (i.e. has a compound parent) nodes in the calling collection.

                                                                                    nodes.nonorphans( [,selector] )
                                                                                    • selector [optional]

                                                                                      A selector used to filter the resultant collection.

                                                                                    nodes.children()

                                                                                    Get all compound child (i.e. direct descendant) nodes of each node in the collection.

                                                                                    nodes.children( [,selector] )
                                                                                    • selector [optional]

                                                                                      A selector used to filter the resultant collection.

                                                                                    nodes.descendants()

                                                                                    Get all compound descendant (i.e. children, children's children, etc.) nodes of each node in the collection.

                                                                                    nodes.descendants( [,selector] )
                                                                                    • selector [optional]

                                                                                      A selector used to filter the resultant collection.

                                                                                    nodes.siblings()

                                                                                    Get all sibling (i.e. same compound parent) nodes of each node in the collection.

                                                                                    nodes.siblings( [,selector] )
                                                                                    • selector [optional]

                                                                                      A selector used to filter the resultant collection.

                                                                                    Selectors

                                                                                    Notes & caveats

                                                                                    A selector functions similar to a CSS selector on DOM elements, but selectors in Cytoscape.js instead work on collections of graph elements. Note that wherever a selector may be specified as the argument to a function, a eles.filter()-style filter function may be used in place of the selector. For example:

                                                                                    var neighborhoodEdges = cy.neighborhood(function(){
                                                                                      return this.isEdge();
                                                                                    });
                                                                                    

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

                                                                                    // get all nodes with weight more than 50 and height strictly less than 180
                                                                                    cy.elements("node[weight >= 50][height < 180]");
                                                                                    

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

                                                                                    // get node j and the edges coming out from it
                                                                                    cy.elements('node#j, edge[source = "j"]');
                                                                                    

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

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

                                                                                    Note that metacharacters ( ^ $ \ / ( ) | ? + * [ ] { } , . ) need to be escaped:

                                                                                    cy.filter('#some\\$funky\\@id');
                                                                                    

                                                                                    Group, class, & ID

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

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

                                                                                    #id Matches element with the matching ID (e.g. #foo is the same as [id = 'foo'])

                                                                                    Data

                                                                                    [name]
                                                                                    Matches elements if they have the specified data attribute defined, i.e. 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 not defined, i.e. undefined (e.g [^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 = 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'])

                                                                                    ! (data attribute operator modifier)
                                                                                    Prepended to an operator so that it is negated (e.g. [foo !$= 'ar'], [foo !>= 'a'])

                                                                                    [[]] (metadata brackets)
                                                                                    Use double square 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.

                                                                                    Compound nodes

                                                                                    > (child selector)
                                                                                    Matches direct children of the parent node (e.g. node > node).

                                                                                      (descendant selector)
                                                                                    Matches descendants of the parent node (e.g. node node).

                                                                                    $ (subject selector)
                                                                                    Sets the subject of the selector (e.g. $node > node to select the parent nodes instead of the children).

                                                                                    State

                                                                                    Animation

                                                                                    Selection

                                                                                    Locking

                                                                                    Visibility

                                                                                    User interaction:

                                                                                    In or out of graph

                                                                                    Compound nodes

                                                                                    Edges

                                                                                    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.

                                                                                    It is important to note that in your stylesheet, specificity rules are completely ignored. In CSS, specificity often makes stylesheets behave in ways contrary to developer's natural mental model. This is terrible, because it wastes time and overcomplicates things. Thus, there is no analogue of CSS specificity in Cytoscape.js stylesheets. For a given style property for a given element, the last matching selector wins. In general, you should be using something along the lines of OOCSS principles, anyway — making specificity essentially irrelevant.

                                                                                    Format

                                                                                    The style specified at initialisation can be in a functional format, in a plain JSON format, or in a string format — the plain JSON format and string formats being more useful if you want to pull down the style from the server. If you pull the style from the server, you must initialise Cytoscape.js after the style has been loaded.

                                                                                    String format

                                                                                    Note that the trailing semicolons for each property are mandatory. Parsing will certainly fail without them.

                                                                                    An example style file:

                                                                                    /* comments may be entered like this */
                                                                                    node {
                                                                                      background-color: green;
                                                                                    }
                                                                                    

                                                                                    At initialisation:

                                                                                    cytoscape({
                                                                                      container: document.getElementById('cy'),
                                                                                    
                                                                                      // ...
                                                                                    
                                                                                      style: 'node { background-color: green; }' // probably previously loaded via ajax rather than hardcoded
                                                                                    
                                                                                      // , ...
                                                                                    });
                                                                                    

                                                                                    Plain JSON format

                                                                                    cytoscape({
                                                                                      container: document.getElementById('cy'),
                                                                                    
                                                                                      // ...
                                                                                    
                                                                                      style: [
                                                                                        {
                                                                                          selector: 'node',
                                                                                          css: {
                                                                                            'background-color': 'red'
                                                                                          }
                                                                                        }
                                                                                    
                                                                                        // , ...
                                                                                      ]
                                                                                    
                                                                                      // , ...
                                                                                    });
                                                                                    

                                                                                    Functional format

                                                                                    cytoscape({
                                                                                      container: document.getElementById('cy'),
                                                                                    
                                                                                      // ...
                                                                                    
                                                                                      style: cytoscape.stylesheet()
                                                                                        .selector('node')
                                                                                          .css({
                                                                                            'background-color': 'blue'
                                                                                          })
                                                                                    
                                                                                          // ...
                                                                                    
                                                                                    
                                                                                      // , ...
                                                                                    });
                                                                                    

                                                                                    Property types

                                                                                    Mappers

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

                                                                                    If a mapping is defined, either define the mapped data for all elements or use selectors to limit the mapping to elements that have the mapped data defined.

                                                                                    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.

                                                                                    mapLayoutData() specifies a linear mapping like mapData() but uses special layout defined values (only supported for some layouts).

                                                                                    Node body

                                                                                    These properties affect the style of a node's body:

                                                                                    These node body properties only apply to compound nodes (i.e. nodes who have embedded children):

                                                                                    Background image

                                                                                    A background image may be applied to a node's body:

                                                                                    Pie chart background

                                                                                    These properties allow you to create pie chart backgrounds on nodes. Note that 16 slices maximum are supported per node, so in the properties 1 <= i <= 16. Of course, you must specify a numerical value for each property in place of i. Each nonzero sized slice is placed in order of i, starting from the 12 o'clock position and working clockwise.

                                                                                    You may find it useful to reserve a number to a particular colour for all nodes in your stylesheet. Then you can specify values for pie-i-background-size accordingly for each node via a mapper. This would allow you to create consistently coloured pie charts in each node of the graph based on element data.

                                                                                    Edge line

                                                                                    These properties affect the styling of an edge's line:

                                                                                    Visibility

                                                                                    Edge arrow

                                                                                    Towards the source node:

                                                                                    Towards the source node, positioned in the middle of the edge:

                                                                                    Towards the target node:

                                                                                    Towards the target node, positioned in the middle of the edge:

                                                                                    Labels

                                                                                    Overlay

                                                                                    These properties allow for the creation of overlays on top of nodes or edges, and are often used in the :active state.

                                                                                    Transition animation

                                                                                    Core

                                                                                    These properties affect UI global to the graph, and apply only to the core. You can use the special core selector string to set these properties.

                                                                                    Events

                                                                                    Event object

                                                                                    Events passed to handler callbacks are similar to jQuery event objects in that they wrap native event objects, mimicking their API.

                                                                                    Fields:

                                                                                    Fields for only user input device events:

                                                                                    Fields for only layout events:

                                                                                    Event bubbling

                                                                                    All events that occur on elements get bubbled up to the core. You must take this into consideration when binding to the core so you can differentiate between events that happened on the background and ones that happened on elements. Use the eventObj.cyTarget field, which indicates the originator of the event (i.e. eventObj.cyTarget === cy || eventObj.cyTarget === someEle).

                                                                                    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.

                                                                                    There are also some higher level events that you can use so you don't have to bind to different events for mouse-input devices and for touch devices.

                                                                                    Collection events

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

                                                                                    Graph events

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

                                                                                    Layouts

                                                                                    The function of a layout is to set the positions on the nodes in the graph. Layouts are extensions of Cytoscape.js such that it is possible for anyone to write a layout without modifying the library itself.

                                                                                    Several layouts are included with Cytoscape.js by default, and their options are described in the sections that follow with the default values specified. Note that you must set options.name to the name of the layout to specify which one you want to run.

                                                                                    null

                                                                                    The null layout puts all nodes at (0, 0). It's useful for debugging purposes.

                                                                                    Options

                                                                                    var options = {
                                                                                      name: 'null',
                                                                                    
                                                                                      ready: function(){}, // on layoutready
                                                                                      stop: function(){} // on layoutstop
                                                                                    };
                                                                                    
                                                                                    cy.layout( options );

                                                                                    random

                                                                                    The random layout puts nodes in random positions within the viewport.

                                                                                    Options

                                                                                    var options = {
                                                                                      name: 'random',
                                                                                    
                                                                                      fit: true, // whether to fit to viewport
                                                                                      padding: 30, // fit padding
                                                                                      boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
                                                                                      animate: false, // whether to transition the node positions
                                                                                      animationDuration: 500, // duration of animation in ms if enabled
                                                                                      ready: undefined, // callback on layoutready
                                                                                      stop: undefined // callback on layoutstop
                                                                                    };
                                                                                    
                                                                                    cy.layout( options );

                                                                                    preset

                                                                                    The preset layout puts nodes in the positions you specify manually.

                                                                                    Options

                                                                                    var options = {
                                                                                      name: 'preset',
                                                                                    
                                                                                      positions: undefined, // map of (node id) => (position obj); or function(node){ return somPos; }
                                                                                      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)
                                                                                      fit: true, // whether to fit to viewport
                                                                                      padding: 30, // padding on fit
                                                                                      animate: false, // whether to transition the node positions
                                                                                      animationDuration: 500, // duration of animation in ms if enabled
                                                                                      ready: undefined, // callback on layoutready
                                                                                      stop: undefined // callback on layoutstop
                                                                                    };
                                                                                    
                                                                                    cy.layout( options );

                                                                                    grid

                                                                                    The grid layout puts nodes in a well-spaced grid.

                                                                                    Options

                                                                                    var options = {
                                                                                      name: 'grid',
                                                                                    
                                                                                      fit: true, // whether to fit the viewport to the graph
                                                                                      padding: 30, // padding used on fit
                                                                                      boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
                                                                                      avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
                                                                                      rows: undefined, // force num of rows in the grid
                                                                                      columns: undefined, // force num of cols in the grid
                                                                                      position: function( node ){}, // returns { row, col } for element
                                                                                      animate: false, // whether to transition the node positions
                                                                                      animationDuration: 500, // duration of animation in ms if enabled
                                                                                      ready: undefined, // callback on layoutready
                                                                                      stop: undefined // callback on layoutstop
                                                                                    };
                                                                                    
                                                                                    cy.layout( options );

                                                                                    circle

                                                                                    The circle layout puts nodes in a circle.

                                                                                    Options

                                                                                    var options = {
                                                                                      name: 'circle',
                                                                                    
                                                                                      fit: true, // whether to fit the viewport to the graph
                                                                                      padding: 30, // the padding on fit
                                                                                      boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
                                                                                      avoidOverlap: true, // prevents node overlap, may overflow boundingBox and radius if not enough space
                                                                                      radius: undefined, // the radius of the circle
                                                                                      startAngle: 3/2 * Math.PI, // the position of the first node
                                                                                      counterclockwise: false, // whether the layout should go counterclockwise (true) or clockwise (false)
                                                                                      animate: false, // whether to transition the node positions
                                                                                      animationDuration: 500, // duration of animation in ms if enabled
                                                                                      ready: undefined, // callback on layoutready
                                                                                      stop: undefined // callback on layoutstop
                                                                                    };
                                                                                    
                                                                                    cy.layout( options );

                                                                                    concentric

                                                                                    The concentric layout positions nodes in concentric circles, based on a metric that you specify to segregate the nodes into levels. This layout sets the concentric layout value based on your metric, which can be used with mapLayoutData().

                                                                                    Options

                                                                                    var options = {
                                                                                      name: 'concentric',
                                                                                    
                                                                                      fit: true, // whether to fit the viewport to the graph
                                                                                      padding: 30, // the padding on fit
                                                                                      startAngle: 3/2 * Math.PI, // the position of the first node
                                                                                      counterclockwise: false, // whether the layout should go counterclockwise/anticlockwise (true) or clockwise (false)
                                                                                      minNodeSpacing: 10, // min spacing between outside of nodes (used for radius adjustment)
                                                                                      boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
                                                                                      avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
                                                                                      height: undefined, // height of layout area (overrides container height)
                                                                                      width: undefined, // width of layout area (overrides container width)
                                                                                      concentric: function(){ // returns numeric value for each node, placing higher nodes in levels towards the centre
                                                                                        return this.degree();
                                                                                      },
                                                                                      levelWidth: function(nodes){ // the variation of concentric values in each level
                                                                                        return nodes.maxDegree() / 4;
                                                                                      },
                                                                                      animate: false, // whether to transition the node positions
                                                                                      animationDuration: 500, // duration of animation in ms if enabled
                                                                                      ready: undefined, // callback on layoutready
                                                                                      stop: undefined // callback on layoutstop
                                                                                    };
                                                                                    
                                                                                    cy.layout( options );

                                                                                    breadthfirst

                                                                                    The breadthfirst layout puts nodes in a hierarchy, based on a breadthfirst traversal of the graph.

                                                                                    Options

                                                                                    var options = {
                                                                                      name: 'breadthfirst',
                                                                                    
                                                                                      fit: true, // whether to fit the viewport to the graph
                                                                                      directed: false, // whether the tree is directed downwards (or edges can point in any direction if false)
                                                                                      padding: 30, // padding on fit
                                                                                      circle: false, // put depths in concentric circles if true, put depths top down if false
                                                                                      boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
                                                                                      avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
                                                                                      roots: undefined, // the roots of the trees
                                                                                      maximalAdjustments: 0, // how many times to try to position the nodes in a maximal way (i.e. no backtracking)
                                                                                      animate: false, // whether to transition the node positions
                                                                                      animationDuration: 500, // duration of animation in ms if enabled
                                                                                      ready: undefined, // callback on layoutready
                                                                                      stop: undefined // callback on layoutstop
                                                                                    };
                                                                                    
                                                                                    cy.layout( options );

                                                                                    dagre

                                                                                    The dagre layout organises the graph using a DAG (directed acyclic graph) system. It is especially suitable for DAGs and trees. For more information, please refer to its Dagre's documentation.

                                                                                    Because Dagre is a separate library, the developer must manually include dagre.js in his app in order to use the dagre layout.

                                                                                    Options

                                                                                    var options = {
                                                                                      name: 'dagre',
                                                                                    
                                                                                      // dagre algo options, uses default value on undefined
                                                                                      nodeSep: undefined, // the separation between adjacent nodes in the same rank
                                                                                      edgeSep: undefined, // the separation between adjacent edges in the same rank
                                                                                      rankSep: undefined, // the separation between adjacent nodes in the same rank
                                                                                      rankDir: undefined, // 'TB' for top to bottom flow, 'LR' for left to right
                                                                                      minLen: function( edge ){ return 1; }, // number of ranks to keep between the source and target of the edge
                                                                                      
                                                                                      // general layout options
                                                                                      fit: true, // whether to fit to viewport
                                                                                      padding: 30, // fit padding
                                                                                      animate: false, // whether to transition the node positions
                                                                                      animationDuration: 500, // duration of animation in ms if enabled
                                                                                      boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
                                                                                      ready: function(){}, // on layoutready
                                                                                      stop: function(){} // on layoutstop
                                                                                    };
                                                                                    
                                                                                    cy.layout( options );

                                                                                    cose

                                                                                    The cose (Compound Spring Embedder) layout uses a force-directed simulation to lay out compound graphs. It was implemented by Gerardo Huck as part of Google Summer of Code 2013 (Mentors: Max Franz, Christian Lopes, Anders Riutta, Ugur Dogrusoz).

                                                                                    Based on the article "A layout algorithm for undirected compound graphs" by Ugur Dogrusoz, Erhan Giral, Ahmet Cetintas, Ali Civril and Emek Demir.

                                                                                    Options

                                                                                    var options = {
                                                                                      name: 'cose',
                                                                                    
                                                                                      // Called on `layoutready`
                                                                                      ready               : function() {},
                                                                                    
                                                                                      // Called on `layoutstop`
                                                                                      stop                : function() {},
                                                                                    
                                                                                      // Whether to animate while running the layout
                                                                                      animate             : true,
                                                                                    
                                                                                      // Number of iterations between consecutive screen positions update (0 -> only updated on the end)
                                                                                      refresh             : 4,
                                                                                      
                                                                                      // Whether to fit the network view after when done
                                                                                      fit                 : true, 
                                                                                    
                                                                                      // Padding on fit
                                                                                      padding             : 30, 
                                                                                    
                                                                                      // Constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
                                                                                      boundingBox         : undefined,
                                                                                    
                                                                                      // Whether to randomize node positions on the beginning
                                                                                      randomize           : true,
                                                                                      
                                                                                      // Whether to use the JS console to print debug messages
                                                                                      debug               : false,
                                                                                    
                                                                                      // Node repulsion (non overlapping) multiplier
                                                                                      nodeRepulsion       : 400000,
                                                                                      
                                                                                      // Node repulsion (overlapping) multiplier
                                                                                      nodeOverlap         : 10,
                                                                                      
                                                                                      // Ideal edge (non nested) length
                                                                                      idealEdgeLength     : 10,
                                                                                      
                                                                                      // Divisor to compute edge forces
                                                                                      edgeElasticity      : 100,
                                                                                      
                                                                                      // Nesting factor (multiplier) to compute ideal edge length for nested edges
                                                                                      nestingFactor       : 5, 
                                                                                      
                                                                                      // Gravity force (constant)
                                                                                      gravity             : 250, 
                                                                                      
                                                                                      // Maximum number of iterations to perform
                                                                                      numIter             : 100,
                                                                                      
                                                                                      // Initial temperature (maximum node displacement)
                                                                                      initialTemp         : 200,
                                                                                      
                                                                                      // Cooling factor (how the temperature is reduced between consecutive iterations
                                                                                      coolingFactor       : 0.95, 
                                                                                      
                                                                                      // Lower temperature threshold (below this point the layout will end)
                                                                                      minTemp             : 1.0
                                                                                    };
                                                                                    
                                                                                    cy.layout( options );

                                                                                    cola

                                                                                    The cola layout uses a force-directed physics simulation with several sophisticated constraints. For more information about Cola and its parameters, refer to its documentation.

                                                                                    Because Cola.js is a separate library, the developer must manually include cola.js in his app in order to use the cola layout.

                                                                                    Options

                                                                                    var options = {
                                                                                      name: 'cola',
                                                                                    
                                                                                      animate: true, // whether to show the layout as it's running
                                                                                      refresh: 1, // number of ticks per frame; higher is faster but more jerky
                                                                                      maxSimulationTime: 4000, // max length in ms to run the layout
                                                                                      ungrabifyWhileSimulating: false, // so you can't drag nodes during layout
                                                                                      fit: true, // on every layout reposition of nodes, fit the viewport
                                                                                      padding: 30, // padding around the simulation
                                                                                      boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
                                                                                    
                                                                                      // layout event callbacks
                                                                                      ready: function(){}, // on layoutready
                                                                                      stop: function(){}, // on layoutstop
                                                                                    
                                                                                      // positioning options
                                                                                      randomize: false, // use random node positions at beginning of layout
                                                                                      avoidOverlap: true, // if true, prevents overlap of node bounding boxes
                                                                                      handleDisconnected: true, // if true, avoids disconnected components from overlapping
                                                                                      nodeSpacing: function( node ){ return 10; }, // extra spacing around nodes
                                                                                      flow: undefined, // use DAG/tree flow layout if specified, e.g. { axis: 'y', minSeparation: 30 }
                                                                                      alignment: undefined, // relative alignment constraints on nodes, e.g. function( node ){ return { x: 0, y: 1 } }
                                                                                    
                                                                                      // different methods of specifying edge length
                                                                                      // each can be a constant numerical value or a function like `function( edge ){ return 2; }`
                                                                                      edgeLength: undefined, // sets edge length directly in simulation
                                                                                      edgeSymDiffLength: undefined, // symmetric diff edge length in simulation
                                                                                      edgeJaccardLength: undefined, // jaccard edge length in simulation
                                                                                    
                                                                                      // iterations of cola algorithm; uses default values on undefined
                                                                                      unconstrIter: undefined, // unconstrained initial layout iterations
                                                                                      userConstIter: undefined, // initial layout iterations with user-specified constraints
                                                                                      allConstIter: undefined, // initial layout iterations with all constraints including non-overlap
                                                                                    
                                                                                      // infinite layout options
                                                                                      infinite: false // overrides all other options for a forces-all-the-time mode
                                                                                    };
                                                                                    
                                                                                    cy.layout( options );

                                                                                    arbor

                                                                                    The arbor layout uses a force-directed physics simulation. For more information about Arbor and its parameters, refer to its documentation.

                                                                                    Notes about Arbor:

                                                                                    Options

                                                                                    var options = {
                                                                                      name: 'arbor',
                                                                                    
                                                                                      animate: true, // whether to show the layout as it's running
                                                                                      maxSimulationTime: 4000, // max length in ms to run the layout
                                                                                      fit: true, // on every layout reposition of nodes, fit the viewport
                                                                                      padding: 30, // padding around the simulation
                                                                                      boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
                                                                                      ungrabifyWhileSimulating: false, // so you can't drag nodes during layout
                                                                                    
                                                                                      // callbacks on layout events
                                                                                      ready: undefined, // callback on layoutready 
                                                                                      stop: undefined, // callback on layoutstop
                                                                                    
                                                                                      // 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
                                                                                      // e.g. nodeMass: function(n){ return n.data('weight') }
                                                                                      nodeMass: undefined, 
                                                                                      edgeLength: undefined,
                                                                                    
                                                                                      stepSize: 0.1, // smoothing of arbor bounding box
                                                                                    
                                                                                      // 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);
                                                                                      },
                                                                                    
                                                                                      // infinite layout options
                                                                                      infinite: false // overrides all other options for a forces-all-the-time mode
                                                                                    };
                                                                                    
                                                                                    cy.layout( options );

                                                                                    springy

                                                                                    The springy layout uses a force-directed physics simulation. For more information about Springy and its parameters, refer to its documentation.

                                                                                    Because Springy.js is a separate library, the developer must manually include springy.js in his app in order to use the springy layout.

                                                                                    Options

                                                                                    var options = {
                                                                                      name: 'springy',
                                                                                    
                                                                                      animate: true, // whether to show the layout as it's running
                                                                                      maxSimulationTime: 4000, // max length in ms to run the layout
                                                                                      ungrabifyWhileSimulating: false, // so you can't drag nodes during layout
                                                                                      fit: true, // whether to fit the viewport to the graph
                                                                                      padding: 30, // padding on fit
                                                                                      boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
                                                                                      random: false, // whether to use random initial positions
                                                                                      infinite: false, // overrides all other options for a forces-all-the-time mode
                                                                                      ready: undefined, // callback on layoutready
                                                                                      stop: undefined, // callback on layoutstop
                                                                                    
                                                                                      // springy forces
                                                                                      stiffness: 400,
                                                                                      repulsion: 400,
                                                                                      damping: 0.5
                                                                                    };
                                                                                    
                                                                                    cy.layout( options );

                                                                                    Layout manipulation

                                                                                    Layouts have a set of functions available to them, which allow for more complex behaviour than the primary run-one-layout-at-a-time usecase. A new, developer accessible layout can be made via cy.makeLayout().

                                                                                    layout.run()
                                                                                    Aliases: layout.start(),

                                                                                    Start running the layout.

                                                                                    Details

                                                                                    If the layout is asynchronous (i.e. continuous), then calling layout.run() simply starts the layout. Synchronous (i.e. discrete) layouts finish before layout.run() returns. Whenever the layout is started, the layoutstart event is emitted.

                                                                                    The layout will emit the layoutstop event when it has finished or has been otherwise stopped (e.g. by calling layout.stop()). The developer can bind to layoutstop using layout.on() or setting the layout options appropriately with a callback.

                                                                                    Examples

                                                                                    var layout = cy.makeLayout({ name: 'random' });
                                                                                    
                                                                                    layout.run();
                                                                                    
                                                                                    layout.stop()

                                                                                    Stop running the (asynchronous/discrete) layout.

                                                                                    Details

                                                                                    Calling layout.stop() stops an asynchronous (continuous) layout. It's useful if you want to prematurely stop a running layout.

                                                                                    Examples

                                                                                    var layout = cy.makeLayout({ name: 'cose' });
                                                                                    
                                                                                    layout.run();
                                                                                    
                                                                                    // some time later...
                                                                                    setTimeout(function(){
                                                                                      layout.stop();
                                                                                    }, 100);
                                                                                    

                                                                                    Layout events

                                                                                    layout.on()

                                                                                    Bind to events that are emitted by the layout.

                                                                                    layout.on( ,events [,data],function(evt) )
                                                                                    • events

                                                                                      A space separated list of event names.

                                                                                    • data [optional]

                                                                                      A plain object which is passed to the handler in the event object argument.

                                                                                    • function(evt)

                                                                                      The handler function that is called when one of the specified events occurs.

                                                                                      • evt

                                                                                        The event object.

                                                                                    layout.on( ,eventsMap [,data] )
                                                                                    • eventsMap

                                                                                      A map of event names to handler functions.

                                                                                    • data [optional]

                                                                                      A plain object which is passed to the handler in the event object argument.

                                                                                    layout.one()

                                                                                    Bind to events that are emitted by the layout, and trigger the handler only once.

                                                                                    layout.one( ,events [,data],function(evt) )
                                                                                    • events

                                                                                      A space separated list of event names.

                                                                                    • data [optional]

                                                                                      A plain object which is passed to the handler in the event object argument.

                                                                                    • function(evt)

                                                                                      The handler function that is called when one of the specified events occurs.

                                                                                      • evt

                                                                                        The event object.

                                                                                    layout.one( ,eventsMap [,data] )
                                                                                    • eventsMap

                                                                                      A map of event names to handler functions.

                                                                                    • data [optional]

                                                                                      A plain object which is passed to the handler in the event object argument.

                                                                                    layout.off()

                                                                                    Remove event handlers on the layout.

                                                                                    layout.off( ,events [,handler] )
                                                                                    • events

                                                                                      A space separated list of event names.

                                                                                    • handler [optional]

                                                                                      A reference to the handler function to remove.

                                                                                    layout.off( ,eventsMap )
                                                                                    • eventsMap

                                                                                      A map of event names to handler functions to remove.

                                                                                    layout.trigger()

                                                                                    Trigger one or more events on the layout.

                                                                                    layout.trigger( ,events [,extraParams] )
                                                                                    • events

                                                                                      A space separated list of event names to trigger.

                                                                                    • extraParams [optional]

                                                                                      An array of additional parameters to pass to the handler.

                                                                                    Architecture

                                                                                    Cytoscape.js uses an event-driven model with a core API. The core has several extensions, each of which is notified of events by the core, as needed. Extensions modify the elements in the graph and notify the core of any changes.

                                                                                    The client application accesses Cytoscape.js solely through the core. Clients do not access extensions directly, apart from the case where a client wishes to write his own custom extension.

                                                                                    The following diagramme summarises the extensions of Cytoscape.js, which are discussed in further detail elsewhere in this documentation.

                                                                                    Extensions

                                                                                    The above extensions are a curated list. To add your extension, please submit a request that includes your extension's GitHub URL and a one line description.

                                                                                    API

                                                                                    The API makes it very easy to write an extension, following this format: cytoscape( type, name, extension );

                                                                                    The value of type can take on the following values:

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

                                                                                    Autoscaffolding

                                                                                    There exists a Slush project for Cytoscape.js such that the full project scaffolding for a new extension is automatically generated for you. By following the included instructions, you can easily create Cytoscape.js extensions that are well organised, easily maintained, and published to npm and bower.

                                                                                    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', 'foo', function( fn ){
                                                                                      for( var i = 0; i < this.length; i++ ){
                                                                                        this[i].data('foo', 'bar');
                                                                                      }
                                                                                    
                                                                                      return this; // chainability
                                                                                    });
                                                                                    
                                                                                    cy.elements().foo();
                                                                                    

                                                                                    Layouts

                                                                                    A layout modifies the positions of nodes in the graph. A layout has number of options, which are specific to the particular layout.

                                                                                    Layouts may be blocking if they are fast — meaning you can execute your code to run after the layout on the line following the layout call. Layouts may also be continuous, in which case, callback functions are provided to know when the layout finishes.

                                                                                    A layout has two events that must be triggered on the core, including layoutready and layoutstop:

                                                                                    For an example layout, please refer to the null layout. The layout just sets each node to position (0, 0), and it is well documented. The Cola layout is a good example of a continuous layout.

                                                                                    Renderers

                                                                                    For an example renderer, please refer to the canvas renderer.

                                                                                    The API of the renderer follows the actor model, and so it has a single main entry point, the notify() function. The core uses the notify() function to send event objects to the renderer. The format of the event object is as follows:

                                                                                    If you're interested in writing a custom renderer for Cytoscape.js, please file an issue for more help if needed.

                                                                                    Performance

                                                                                    Background

                                                                                    You may notice that performance starts to degrade on graphs with large numbers of elements. This happens for several reasons:

                                                                                    Optimisations

                                                                                    You can get much better performance out of Cytoscape.js by tuning your options, in descending order of significance:

                                                                                    By making these optimisations, you can increase the performance of Cytoscape.js such that you can have high performance graphs several orders of magnitude greater in size.