Responsible: |
The KLay JS project provides our Java-based layout algorithms to the JavaScript community. We leverage the Java to JavaScript compiler of the Google Web Toolkit (GWT) to convert our Java code into a JavaScript library. This allows you to use the full power of our layout algorithms in pure JavaScript.
The JavaScript library only contains the Klay Layered algorithm. |
Near future |
http://rtsys.informatik.uni-kiel.de/~kieler/files/nightly/klayjs/ |
$klay.layout({ graph, options, success, error }); |
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.
<!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> |