Color
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 COLORS = ['#132b43','#326896','#54aef3'];
var ogma = new Ogma({
container: 'graph-container'
});
// Create a rule that assigns a color to each node using a function.
// This function must be deterministic as it will be called later on, each time the node must be redrawn.
ogma.styles.addEdgeRule({
color: function (e) {
return COLORS[e.getId() % COLORS.length];
},
});
// Generate a random graph
ogma.generate.random({nodes: 15, edges: 30}).then(function (graph) {
// Assign this graph to Ogma.
ogma.setGraph(graph);
ogma.view.locateGraph();
// Color the edge '0' in orange.
ogma.getEdge('0').setAttributes({color: 'orange'});
// Assign the edges who have node '13' as source the color 'purple' and an arrow shape.
ogma.getEdges().filter(function (e) {
return (e.getSource().getId() === '13');
}).setAttributes({
color: 'purple',
shape: 'arrow'
});
})
</script>
</body>
</html>
