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; }