JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 76009
  • Score
    100M100P100Q169947F
  • License MIT

The Dagre layout for DAGs and trees for Cytoscape.js

Package Exports

  • cytoscape-dagre

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (cytoscape-dagre) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

cytoscape-dagre

Description

The Dagre layout for DAGs and trees for Cytoscape.js

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

Dependencies

  • Cytoscape.js ^2.4.0 || ^3.0.0
  • Dagre ~0.7.4

Usage instructions

Download the library:

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

require() the library as appropriate for your project:

CommonJS:

var cytoscape = require('cytoscape');
var cydagre = require('cytoscape-dagre');

cydagre( cytoscape ); // register extension

AMD:

require(['cytoscape', 'cytoscape-dagre'], function( cytoscape, cydagre, dagre ){
  cydagre( cytoscape, dagre ); // register extension
});

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

API

Call the layout, e.g. cy.layout({ name: 'dagre', ... }), with options:

var defaults = {
  // 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
  edgeWeight: function( edge ){ return 1; }, // higher weight edges are generally made shorter and straighter than lower weight edges

  // 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
  animationEasing: undefined, // easing of animation if enabled
  boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
  ready: function(){}, // on layoutready
  stop: function(){} // on layoutstop
};

Publishing instructions

This project is set up to automatically be published to npm and bower. To publish:

  1. Set the version number environment variable: export VERSION=1.2.3
  2. Publish: gulp publish
  3. If publishing to bower for the first time, you'll need to run bower register cytoscape-dagre https://github.com/cytoscape/cytoscape.js-dagre.git