How do i "plug in" the plugins for sigma.js?

Question

Sigma.js lists several examples on their GitHub, but it is not clear from them what is required to load a plugin.

I have tried simply including a <script> tag pointing to the plugin's JavaScript file but that did not work. How do I import/use/copypaste the plugin to my site?

Answer 1

First, include the sigma-files you need:

<script src="sigma/sigma.concat.js"></script>
<script src="sigma/plugins/sigma.parseGexf.js"></script>
<script src="sigma/plugins/sigma.forceatlas2.js"></script>

Then start your script;

<script type="text/javascript">
function init() {
  // Instanciate sigma.js and customize rendering :
   sigInst = sigma.init(document.getElementById('graph')).drawingProperties({
    defaultLabelColor: '#fff',
    defaultLabelSize: 14,
    defaultLabelBGColor: '#fff',
    defaultLabelHoverColor: '#000',
    labelThreshold: 6,
    defaultEdgeType: 'curve' 

  }).graphProperties({
    minNodeSize: 2,
    maxNodeSize: 5,
    minEdgeSize: 1,
    maxEdgeSize: 1

  }).mouseProperties({
    maxRatio: 32
  });

  // Parse a GEXF encoded file to fill the graph
  // (requires "sigma.parseGexf.js" to be included)
  sigInst.parseGexf('getgefx.php');


  sigInst.bind('downnodes',function(event){
    var nodes = event.content;
    var neighbors = {};
    sigInst.iterEdges(function(e){
      if(nodes.indexOf(e.source)>=0 || nodes.indexOf(e.target)>=0){
        neighbors[e.source] = 1;
        neighbors[e.target] = 1;

      } 
    }).iterNodes(function(n){
      if(!neighbors[n.id]){
        n.attr['temphidden'] = 1;
        n.attr['oldcolor'] = n.color;
        // var c = sigma.tools.getRGB(n.color);
        n.color = "#eee"; // #ccc";

        // n.color = "rgba("+c['r']+","+c['g']+","+c['b']+",0.2)";
      }
    }).draw(2,2,2);
  }).bind('upnodes',function(){
    sigInst.iterNodes(function(n){
        if(n.attr['temphidden'] == 1) {
            n.color = n.attr['oldcolor'];
            n.attr['temphidden'] = 0;
        }

    }).draw(2,2,2);
  });
  // Draw the graph :
  sigInst.draw(2,2,2);
  sigInst.startForceAtlas2();
  var isRunning = true;
  document.getElementById('stop-layout').addEventListener('click',function(){
    if(isRunning){
      isRunning = false;
      sigInst.stopForceAtlas2();
      document.getElementById('stop-layout').childNodes[0].nodeValue = 'Start Layout';
    }else{
      isRunning = true;
      sigInst.startForceAtlas2();
      document.getElementById('stop-layout').childNodes[0].nodeValue = 'Stop Layout';
    }
  },true);

}

if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", init, false);
} else {
  window.onload = init;
}
</script>