The following code show how to write a plugin for sigma.js, and also shows how the FishEye works.
function init() {
// The following method will parse the related sigma instance nodes
// and set their positions around a circle:
sigma.publicPrototype.myCircularLayout = function() {
var R = 100,
i = 0,
L = this.getNodesCount();
this.iterNodes(function(n){
n.x = Math.cos(Math.PI*(i++)/L)*R;
n.y = Math.sin(Math.PI*(i++)/L)*R;
});
return this.position(0,0,1).draw();
};
// The following method will parse the related sigma instance nodes
// and set its position to as random in a square around the center:
sigma.publicPrototype.myRandomLayout = function() {
var W = 100,
H = 100;
this.iterNodes(function(n){
n.x = W*Math.random();
n.y = H*Math.random();
});
return this.position(0,0,1).draw();
};
// Instanciate sigma.js and customize it :
var sigInst = sigma.init(document.getElementById('sigma-example')).drawingProperties({
defaultLabelColor: '#fff'
});
// Generate a random graph with :
// . N nodes
// . E edges
var i, N = 500, E = 3000;
for(i = 0; i < N; i++){
sigInst.addNode('n'+i,{
'x': Math.random(),
'y': Math.random(),
'label': 'Node '+i,
'size': 0.5+4.5*Math.random(),
'color': 'rgb('+Math.round(Math.random()*256)+','+
Math.round(Math.random()*256)+','+
Math.round(Math.random()*256)+')'
});
}
for(i = 0; i < E; i++){
sigInst.addEdge(i,'n'+(Math.random()*N|0),'n'+(Math.random()*N|0));
}
// Draw the graph :
sigInst.draw();
// Finally, let's bind our methods to some buttons:
document.getElementById('circular').addEventListener('click',function(){
sigInst.myCircularLayout();
},true);
document.getElementById('random').addEventListener('click',function(){
sigInst.myRandomLayout();
},true);
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', init, false);
} else {
window.onload = init;
}