Automatic graph layout based on Sugiyama's algorithm. Specialized for data flow diagrams and ports.
npm install klayjsKLayJS
===
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][wiki-klay].
In case you want to use the layout in conjunction with [D3.js][d3js]
you can take a look at our [KLayJS-D3][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.
``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][jsonkgraph] 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.
`js`
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.
`bash`
npm install klayjs
`js`
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][wiki-layopts]
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][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
!SCChart with Dataflow
#### Sequentially Constructive Graph
!Sequentially Constructive Graph
[wiki-klay]: http://rtsys.informatik.uni-kiel.de/confluence/display/KIELER/KLay+Layered
[wiki-layopts]: http://rtsys.informatik.uni-kiel.de/confluence/display/KIELER/KLay+Layered+Layout+Options
[jsonkgraph]: http://rtsys.informatik.uni-kiel.de/confluence/display/KIELER/JSON+Graph+Format
[klayjs-d3]: https://github.com/OpenKieler/klayjs-d3
[d3js]: http://d3js.org/