klayjs

KLayJS

KLayJS is a layer-based layout algorithm that is particularly suited for node-link diagrams with an inherent direction and ports (explicit attachment points on a node's border). It is based on the ideas originally introduced by Sugiyama et al.

The algorithm is developed in Java and compiled to JavaScript using GWT. For further information see the KIELER Wiki pages.

In case you want to use the layout in conjunction with D3.js you can take a look at our KLayJS-D3 extension. gru

Example Layout of a Ptolemy Diagram

Installation

Either download the klay.js file or install it using npm or bower.

npm install klayjs

bower install klayjs

Usage

The library can be used in the browser, in a WebWorker, and with server-side node.js.

Input graph

We use the JSON KGraph format to specify a graph with its properties. A minimal example looks like this:

var graph = {
  "id": "root",
  "properties": {
      "direction": "RIGHT", "spacing": 40
  },
  "children": [{"id": "n1", "width": 40, "height": 40}, 
               {"id": "n2", "width": 40, "height": 40}],
  "edges": [{"id": "e1", "source": "n1", "target": "n2"}]
};

Browser

Within the browser KLayJS is registered globally with the $klay variable and can be used as follows. Note the difference between local layout options specified for specific elements in the graph and global layout options that are applied to every graph element.

<script type="text/javascript" src="klayjs.js"></script>
<script>
$klay.layout({
  graph: graph,
  options: { spacing: 20 },
  success: function(layouted) { console.log(layouted); },
  error: function(error) { console.log(error); }
});
</script>

Web Worker

Depending on the graph size the layout process can take some time possibly freezing your browser (though it should be fast in most cases). Modern browsers support web workers, some kind of threads for the browser. The following code snippet demonstrates how to start and communicate with a web worker performing layout.

var worker = new Worker('klayjs.js');
// send layout request
worker.postMessage({
  graph: [graph],
  options: [options]
});
// 
worker.addEventListener('message', function (e) {
  var graph = e.data;
  // [ applyLayout(graph) ]
}, false);

node.js

For rapid prototyping or headless diagram generation no browser is required and you might want to use node.js.

npm install klayjs

var klay = require('klayjs');
klay.layout({
  graph: [graph],
  options: [options],
  success: function(g) { console.log(g); }
});

Layout Options

A broad variety of layout options is supported. The available options and their effects are discussed here

Differences

• Other than for the original java version of the layouter, the layoutHierarchy option is by default true.
• If you intend to use the fixed layouter (de.cau.cs.kieler.fixed) at some point, you have to set layoutHierarchy to false.

Examples

Some examples using the KLayJS-D3 extension are available at:

• Ports
• Hierarchy
• Interactive
• Miserables (Data From D3 Force Example)

See the examples folder of the klayjs-d3 project.

SCChart with Dataflow

Sequentially Constructive Graph