Page History
...
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.
| Info |
|---|
This example shows the usage of the Default and Custom Linker. For a Web Worker example see next example. |
| 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> |
...
Overview
Content Tools