Neighbor merging
Open in a new window.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<script src="../build/ogma.min.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="btn" onclick="toggle()">Merge</button>
</body>
<script>
'use strict';
var ogma = new Ogma({
container: 'graph-container',
renderer: 'canvas',
graph: {
nodes: [
{id: 0, data: {type: 'person', name: 'John Smith'}, attributes: {x: 0, y: 0}},
{id: 1, data: {type: 'country', name: 'USA'}, attributes: {x: 30, y: 0}},
{id: 2, data: {type: 'person', name: 'James Brown'}, attributes: {x: 60, y: 0}}
],
edges: [
{id: 0, source: 0, target: 1, data: {type: 'employee_of'}},
{id: 1, source: 1, target: 2, data: {type: 'located_at'}}
]
}
});
var ICONS = {
person: '\uf007',
country: '\uf024'
};
var COLORS = {
person: 'orange',
country: 'dodgerblue'
};
ogma.styles.addRule({
nodeAttributes: {
text: function(node) {
var data = node.getData();
return Object.keys(data).map(function(key) {
return key + ': ' + data[key];
}).join('\n');
},
color: function(node) {
return COLORS[node.getData('type')];
},
icon: {
content: function(node) {
return ICONS[node.getData('type')];
},
font: 'FontAwesome'
}
}
});
var button = document.getElementById('btn');
var transformation = null;
function enableButton() {
button.disabled = false;
button.textContent = button.textContent === 'Merge' ? 'Undo' : 'Merge';
}
function toggle() {
if (transformation) {
transformation.destroy({duration: 500}).then(enableButton);
button.disabled = true;
transformation = null;
} else {
transformation = ogma.transformations.addNeighborMerging({
selector: function(node) {
return node.getData('type') === 'country';
},
dataFunction: function(node) {
return { country: node.getData('name') };
},
duration: 500
});
button.disabled = true;
transformation.whenApplied().then(enableButton);
}
}
</script>
</html>
