(deprecated) KIELER's layout algorithms for JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
debug
test added messy tests Oct 7, 2014
.gitattributes
.gitignore
Gruntfile.js updated library and pushed version to 0.3.0 Jan 28, 2015
LICENSE Renamed license file properly Oct 2, 2016
README.md Update README.md Jul 18, 2017
bower.json
klay.js Updated to 0.4.1 Apr 13, 2016
package.json

README.md

Deprecated: Use elkjs

elkjs is now available and klayjs is deprecated. In other words, open bugs will be migrated to elkjs and hopefully fixed there. This repository will persist, however, no fixes or new builds are to be expected. Some words on ELK: The ELK project is the successor of the KIELER project, which formed the basis of klayjs. KIELER didn't die however, we only extracted the parts of the code related to automatic layout and put it into an official Eclipse project.

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

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:

See the examples folder of the klayjs-d3 project.

SCChart with Dataflow

SCChart with Dataflow

Sequentially Constructive Graph

Sequentially Constructive Graph