Position
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 POSITIONS = ['top', 'right', 'bottom', 'left', 'center'];
var graph = {
nodes: [
{ id: 0, attributes: { x: 0, y: 0 } },
{ id: 1, attributes: { x: 40, y: 0 } },
{ id: 2, attributes: { x: 80, y: 0 } },
{ id: 3, attributes: { x: 120, y: 0 } },
{ id: 4, attributes: { x: 160, y: 0 } }
]
};
var ogma = new Ogma({
container: 'graph-container',
graph: graph
});
ogma.styles.addRule({
nodeAttributes: {
text: {
position: function(node) {
return POSITIONS[node.getId()]
},
content: function(node) {
return 'Node ' + node.getId();
},
minVisibleSize: 0
}
}
});
</script>
</body>
</html>
