Noteworthy Placebo Mongers


    0.4.2 • Public • Published




    This Cytoscape extension allows edges to connect other edges, according to the Associative Model of Data (demo).

    This extension superimposes every edge with an auxiliary node, the "aux node". An aux node represents an edge and acts as a vehicle for connecting that edge.

    Note: this extension does not emulate an edge by 2 edges with the aux node in the middle. Edges are not structurally changed. Instead the aux node is just superimposed, and the extension cares about keeping the aux node position in-sync with the edge position. This approach has several advantages:

    1. The original graph structure is not changed; existing Cytoscape traversal algorithms continue to work.
    2. Cytoscape's advanced edge rendering capabilities (e.g. curved parallel edges) continue to work.
    3. Cytoscape's layout algorithms continue to work. Aux nodes are locked and do not participate in layout.

    The Associative Model of Data

    Joseph V. Homan, Paul J. Kovacs -- A Comparison Of The Relational Database Model And The Associative Database Model (6 page article)
    Issues in Information Systems, Volume X, No. 1, 2009

    Simon Williams -- The Associative Model Of Data (24 page article)
    Journal of Database Marketing, Volume 8, 4, 2001

    Simon Williams -- The Associative Model Of Data (book, 284 pages)
    Lazy Software, 2nd edition, 2002

    amd-schema amd-instances


    • Cytoscape.js >=3.3.2

    Usage instructions

    Download the library:

    • via npm: npm install cytoscape-edge-connections, or
    • via direct download in the repository (probably from a tag).

    Import the library as appropriate for your project:

    ES6 import:

    import cytoscape from 'cytoscape';
    import edgeConnections from 'cytoscape-edge-connections';
    cytoscape.use(edgeConnections);     // register extension

    CommonJS require:

    let cytoscape = require('cytoscape');
    let edgeConnections = require('cytoscape-edge-connections');
    cytoscape.use(edgeConnections);     // register extension

    AMD require:

    require(['cytoscape', 'cytoscape-edge-connections'], function (cytoscape, edgeConnections) {
      edgeConnections(cytoscape);       // register extension

    Plain HTML/JS has the extension registered for you automatically, because no require() is needed.


    You initialize the extension on the Cytoscape instance:

    const ec = cy.edgeConnections(config);

    Optionally you can pass a config object.
    The possible config options are as follows:

    Config option Description Default
    maxPasses See detail about order below. 10


    The object returned by cy.edgeConnections() has several functions available on it:

    Function Description
    addEdge(edge) adds the edge to the graph; source and target can refer to either a node or to another edge
    addEdges(edges) adds all edges contained in the given array to the graph
    auxNode(edge) returns the given edge's aux node; undefined if the given edge has no aux node; throws if the given object is not an edge
    isAuxNode(node) returns true if the given node is an aux node, false otherwise
    edgeId(node) returns the given aux node's edge ID (string); undefined if the given node is not an aux node; throws if the given object is not a node
    edge(node) returns the given aux node's edge; undefined if the edge is not in the graph (anymore); throws if the given object is not an aux node

    The addEdge(s) method(s) accepts usual Cytoscape edge objects (plain JS objects) but with the specialty that source and target can refer to either a node or to another edge.

    Important: in order to get edge connectivity you must create edges programmatically, that is by calling the cy.addEdge(s) method(s) listed above. Only then 1) the edge will get an aux node, and thus can be the source/target of another edge, and 2) can itself have an edge at their source/target end. In contrast edges created/added the standard way (either declaratively in the Cytoscape constructor or by calling cy.add()) will not get edge connectivity. Edges with and without edge connectivity can friendly coexist in the same graph.

    One more detail about order: the cy.addEdges(edges) method finds out itself the order in which to add the given edges. There is no requirement a referred edge appears in the edges array before the referring edge. The only requirements are 1) the referred edges are contained in the array somewhere, and 2) the referred nodes exist in the graph already. (The "find out order" process is governed by the maxPasses config value.) In contrast the (singular) cy.addEdge(edge) method requires that both referred elements (source and target) exist in the graph already, regardless of being node or edge.


    By default an aux node gets the same color as the edge it represents.

    For further styling the aux-node class can be used, e.g. for setting the aux node size:

      style: [
          selector: 'node.aux-node',
          style: {
            'width': 6,
            'height': 6


    1. npm install : installs Webpack into ./node_modules
    2. npm run build : builds ./src into ./dist/cytoscape-edge-connections.min.js

    Version history

    0.4.2 -- Dec 30, 2020

    • Chore:
      • Update link to "The Associative Model Of Data" book (PDF)
      • Adapt URLs to
      • Code run through eslint

    0.4.1 -- Aug 15, 2019

    • Robustness: rendering of corrupt graphs; corrupt parts are logged on the console

    0.4.0 -- Jul 22, 2019

    • Optimization: aux node style recalculation
    • Refactoring: aux node recoloring
    • Fix: reposition aux nodes when removing a parallel edge
    • Change license to AGPL-3.0

    0.3.5 -- Mar 31, 2019

    • Fix addEdge() warning

    0.3.4 -- Mar 2, 2019

    • Update package.json and regarding required Cytoscape version (thanks to @pmeijer)
    • More sparse console logging

    0.3.3 -- Jan 26, 2019

    • Fix InvalidStateError: The object is in an invalid state

    0.3.2 -- Jan 20, 2019

    • Fix: aux node position of parallel edges

    0.3.1 -- Jan 15, 2019

    0.3.0 -- Jan 14, 2019

    • Improved aux node styling:
      • An aux node automatically gets the same color as the edge it represents
      • For styling aux nodes have class aux-node (config option auxNodeData is now removed)
    • API changes:
      • Support edges with string IDs as well
      • New method: edge() returns the edge represented by the given aux node
    • Extension is properly namespaced (to avoid interference with Cytoscape or other extensions/applications, thanks to @maxkfranz):
      • Initializer returns idiosyncratic API object (instead extending Cytoscape's core and collection prototypes)
      • Internal: use a (namespaced) scratchpad to store edge data (instead of changing edge data directly)

    0.2.1 -- Jan 5, 2019

    • README: add styling hint

    0.2.0 -- Jan 2, 2019

    • Extension is general purpose (DMX application specifics removed)
      • 2 config options can be passed to initializer: auxNodeData, maxPasses
    • Fix: aux nodes are not movable by user
    • Extended README
    • Demo page

    0.1.0 -- Dec 30, 2018

    • Initial version; functional


    npm i cytoscape-edge-connections

    DownloadsWeekly Downloads






    Unpacked Size

    133 kB

    Total Files


    Last publish


    • jri