This example will load and display a GEXF encoded graph. Then, when the users rolls the mouse over a node, it will make each edge grey, except the ones that are linked to the node.
function init() {
// Instanciate sigma.js and customize rendering :
var sigInst = sigma.init(document.getElementById('sigma-example')).drawingProperties({
defaultLabelColor: '#fff',
defaultLabelSize: 14,
defaultLabelBGColor: '#fff',
defaultLabelHoverColor: '#000',
labelThreshold: 6,
defaultEdgeType: 'curve',
borderSize: 1,//Something other than 0
nodeBorderColor: "default",//exactly like this
defaultNodeBorderColor: "#000",//Any color of your choice
defaultBorderView: "always"//apply the default color to all nodes always (normal+hover)
}).graphProperties({
minNodeSize: 0.5,
maxNodeSize: 5,
minEdgeSize: 1,
maxEdgeSize: 1
}).mouseProperties({
maxRatio: 4
});
// Parse a GEXF encoded file to fill the graph
// (requires "sigma.parseGexf.js" to be included)
sigInst.parseGexf('les_miserables.gexf');
// Bind events :
var greyColor = '#666';
sigInst.bind('overnodes',function(event){
var nodes = event.content;
var neighbors = {};
sigInst.iterEdges(function(e){
if(nodes.indexOf(e.source)<0 && nodes.indexOf(e.target)<0){
if(!e.attr['grey']){
e.attr['true_color'] = e.color;
e.color = greyColor;
e.attr['grey'] = 1;
}
}else{
e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
e.attr['grey'] = 0;
neighbors[e.source] = 1;
neighbors[e.target] = 1;
}
}).iterNodes(function(n){
if(!neighbors[n.id]){
if(!n.attr['grey']){
n.attr['true_color'] = n.color;
n.color = greyColor;
n.attr['grey'] = 1;
}
}else{
n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
n.attr['grey'] = 0;
}
}).draw(2,2,2);
}).bind('outnodes',function(){
sigInst.iterEdges(function(e){
e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
e.attr['grey'] = 0;
}).iterNodes(function(n){
n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
n.attr['grey'] = 0;
}).draw(2,2,2);
});
// Draw the graph :
sigInst.draw();
}
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
} else {
window.onload = init;
}