sigma.js 용 플러그인을 어떻게 "플러그인"합니까?

Sigma.js는 GitHub에 여러 개의 examples을 나열하지만 플러그인을로드하는 데 필요한 것은 무엇인지 분명하지 않습니다.sigma.js 용 플러그인을 어떻게 "플러그인"합니까?

간단히 말해서 플러그인의 JavaScript 파일을 가리키는 <script> 태그를 포함 시키려고했으나 제대로 작동하지 않았습니다. 플러그인을 내 사이트로 가져 오거나 사용하고 복사하려면 어떻게합니까?

2013-04-20 Tuomas

아마도 내가 파이썬에 익숙한 동안 자바 스크립트는 당신이 나의 장점이라고 부르는 것이 아니라고 언급해야합니다. – Tuomas

나는 그것을 올바르게 이해하고, 플러그인은 단지 자바 스크립트 파일이다. 나는 당신이 당신의 html 파일에서 플러그인과 "reference"를 다운로드한다고 생각할 것이다. "script type ="text/javascript "src = ...."예 : – user1043144

아니, 미안하지만, 그렇게 해봤지만 그렇게 작동하지 않았다. sigma.js 사이트에 나열된 예제에는 실제 플러그인 기능뿐 아니라 다른 것들이 포함되어있는 것 같습니다. – Tuomas

첫째, 당신이 필요로하는 시그마 - 파일을 포함 :

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

출처

2013-04-21 20:54:19

sigma.js 용 플러그인을 어떻게 "플러그인"합니까?

답변

관련 문제