Shape
Open in a new window.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../build/ogma.min.js"></script>
<style>
#graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }
</style>
</head>
<body>
<div id="graph-container"></div>
<script>
'use strict';
var TYPE = ['line', 'triangle'];
var STYLE = ['plain', 'dashed'];
var HEAD = [null, 'arrow'];
var TAIL = [null, 'arrow'];
function randomGraph(N, E) {
var g = { nodes: [], edges: [] };
for (var i = 0; i < N; i++) {
g.nodes.push({
id: 'n' + i,
attributes: {
x: Math.random() * 200,
y: Math.random() * 200
}
});
}
for (var i$1 = 0; i$1 < E; i$1++) {
g.edges.push({
id: 'e' + i$1,
source: 'n' + (Math.random() * N | 0),
target: 'n' + (Math.random() * N | 0),
attributes: {
shape: {
type: TYPE[Math.random() * TYPE.length | 0],
style: STYLE[Math.random() * STYLE.length | 0],
head: HEAD[Math.random() * HEAD.length | 0],
tail: TAIL[Math.random() * TAIL.length | 0]
}
}
});
}
// self-loop
g.edges.push({
id: 'e' + E,
source: 'n0',
target: 'n1'
});
return g;
}
var ogma = new Ogma({
graph: randomGraph(10, 20),
container: 'graph-container'
});
</script>
</body>
</html>