Group edges
Open in a new window.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../build/ogma.min.js"></script>
<!--<script src="/ogma.js"></script>-->
<style>
#graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }
button { position: absolute; top:10px; left: 10px; }
</style>
</head>
<body>
<div id="graph-container"></div>
<button id="group-btn" onclick="toggleGroup()">Group edges</button>
</body>
<script>
'use strict';
var NB_EDGES = 10;
var COUNTRY = ['France', 'Russia'];
var ogma = new Ogma({
container: 'graph-container'
});
ogma.addNodes([
{id: 'n0', attributes: {x: -50, y: -50 }},
{id: 'n1', attributes: {x: 50, y: 50 }}
]);
ogma.view.locateGraph();
for (var i = 0; i < NB_EDGES; i++) {
var country = COUNTRY[(Math.random() * COUNTRY.length | 0)];
ogma.addEdge({
id: 'e' + i,
source: 'n0',
target: 'n1',
attributes: {
text: country,
width: 2
},
data: {
country: country
}
});
}
var transformation = null;
function toggleGroup() {
if (!transformation) {
// Groups all parallel edges that have the same data.country property
// into meta-edges which the size is the sum of every edge and
// the text is the content of data.country:
transformation = ogma.transformations.addEdgeGrouping({
groupIdFunction: function (edge) {
return edge.getData('country');
},
generator: function (edges, groupId) {
return {
data: {
subEdges: edges,
},
attributes: {
width: edges.reduce(function (width, edge) {
return edge.getAttribute('width') + width
}, 0),
text: groupId
}
};
}
})
} else {
transformation.toggle();
}
// After the next transformation update takes place, update the button content
ogma.transformations.afterNextUpdate().then(function () {
var buttonText = transformation.isEnabled() ? "Ungroup edges" : "Group edges";
document.getElementById('group-btn').textContent = buttonText;
});
}
ogma.events.onClick(function(evt) {
if (evt.target && !evt.target.isNode) {
var subEdges = evt.target.getData('subEdges');
console.log(subEdges && subEdges.getId());
}
});
</script>
</html>
