Page History
...
| Warning |
|---|
The JavaScript library only contains the Klay Layered algorithm. |
Downloads
| Panel | ||
|---|---|---|
| ||
| Near future |
| Panel | ||
|---|---|---|
| ||
| http://rtsys.informatik.uni-kiel.de/~kieler/files/nightly/klayjs/ |
API
| Code Block | ||
|---|---|---|
| ||
$klay.layout({ graph, options, success, error }); |
- graph - the graph to be layouted in our JSON Format.
- options - a JSON object containing layout options that should be used for every hierarchy level of the graph. The same effect can be achieved by specifying the properties for every compound node, however, using the options object offers a more convenient way. Further information on available layout options can be found here.
- success(layouted) - a function to be called upon success, the layouted graph is passed as argument.
- error(obj) - a function to be called if an error occurs, an object is passed as argument which contains a text field with further information about the error.
Example
Below is small example that executes layout on a small graph. Upon success the returned JSON is printed to the console and added to the body of the document.
| Code Block | ||
|---|---|---|
| ||
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>KIELER Klay JS Layout Test</title>
<script type="text/javascript" src="klay.nocache.js"></script>
</head>
<body>
<h1>KIELER Klay JS Layout Test</h1>
</body>
<script>
// the 'klayinit' method is called as soon as GWT finished inititalizing
function klayinit() {
// assemble a graph
var graph = {
"id": "root",
properties: {
"direction": "DOWN",
"spacing": 40
},
"children": [{
"id": "n1",
"width": 40,
"height": 40
}, {
"id": "n2",
"width": 40,
"height": 40
}, {
"id": "n3",
"width": 40,
"height": 40
}],
"edges": [{
"id": "e1",
"source": "n1",
"target": "n2"
},
{
"id": "e2",
"source": "n1",
"target": "n3"
},
{
"id": "e3",
"source": "n2",
"target": "n3"
}
]
};
// execute the layout
$klay.layout({
graph: graph,
options: {
spacing: 50
},
success: function(layouted) {
console.log(layouted);
document.body.innerHTML = "<pre>" + JSON.stringify(layouted, null, " ") + "</pre>";
},
error: function(error) {
console.log(error);
document.body.innerHTML = "<pre>" + JSON.stringify(error, null, " ") + "</pre>";
}
});
}
</script>
</html> |
Development
Overview
Content Tools