klayjs
Version:
Automatic graph layout based on Sugiyama's algorithm. Specialized for data flow diagrams and ports.
65 lines (61 loc) • 1.22 kB
HTML
<html>
<head>
</head>
<body>
<script type="text/javascript">
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
var data = {
graph: graph,
options: {
spacing: 50
}
};
var worker = new Worker("../klay.js");
console.log(worker);
// Register a listener to default WebWorker event, calling
// 'callback' when layout succeeds
worker.addEventListener('message', function (e) {
console.log(JSON.stringify(e.data));
var s = e.data;
window.result = s;
}, false);
worker.postMessage(data);
</script>
</body>
</html>