2013-04-20 14 views
9

Sigma.js在他們的GitHub上列出了幾個examples,但從它們不清楚加載插件需要什麼。如何「插入」sigma.js的插件?

我試圖簡單地包括一個<script>標籤指向插件的JavaScript文件,但沒有奏效。如何將插件導入/使用/複製到我的網站?

+0

也許我應該提到,雖然我對Python感到滿意,但JavaScript並不是你稱之爲我的特長的東西。 – Tuomas 2013-04-20 22:19:33

+0

它我正確理解,插件只是JavaScript文件。我會認爲你要在你的html文件中下載一個插件和「參考」。如「script type =」text/javascript「src = ....」 – user1043144 2013-04-21 05:21:49

+0

不,對不起,我嘗試過,但沒有像那樣工作。在sigma.js網站上列出的例子似乎還包含其他內容以及實際的插件功能。 – Tuomas 2013-04-21 13:21:04

回答

7

首先,包括你所需要的Σ-文件:

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