Need help with klayjs?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

kieler
211 Stars 19 Forks Eclipse Public License 1.0 24 Commits 7 Opened issues

Description

(deprecated) KIELER's layout algorithms for JavaScript

Services available

!
?

Need anything else?

Contributors list

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.

Example Layout of a Ptolemy Diagram

Installation

Either download the

klay.js
file or install it using
npm
or
bower
.
bash
npm install klayjs
bash
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:

js
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.
html


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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.