Как подключить плагины для sigma.js?

Question

Sigma.js перечисляет несколько examples на своем GitHub, но из них неясно, что требуется для загрузки плагина.

Я пробовал просто включить тег <script>, указывающий на файл JavaScript плагина, но это не сработало. Как мне импортировать/использовать/copypaste плагин на мой сайт?

Answer 1

Во-первых, включают СИГМА-файлы, необходимые:

<script src="sigma/sigma.concat.js"></script> 
<script src="sigma/plugins/sigma.parseGexf.js"></script> 
<script src="sigma/plugins/sigma.forceatlas2.js"></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>