2015-06-12 31 views
0

我正在閱讀和循環瀏覽json文件以使用JavaScript庫cytoscape創建包含節點和邊的圖,但我遇到了一些新手問題。這是我的僞代碼w /僞錯誤。需要將循環中創建的節點對象傳遞給邊緣

1)創建用於與標籤的每個節點新節點「X」

2)對於在邊緣每個邊緣,創建具有「源」,「目標」邊緣。

,我有是,創建我需要通過每個節點對象作爲參數的邊緣的問題,(sourceNode,targetNode,{重量:「Y」}所以像這樣將無法工作

var edge = graph.newEdge({source: graphP.elements.edges[j].data.source}, 
           {target: graphP.elements.edges[j].data.target}); 

我試着創建一個數組並寫入每個新節點,但是我最終覆蓋了變量名的值並最終得到了一個長度爲1的數組。當創建所有節點時,我需要一個回去和訪問節點,以創建邊緣(顯然沒有指向自己)。

我猜測它會是某種nodeObjec t.hasKey [label]並在該標籤上匹配以檢索節點ID,然後創建新邊?

我以爲自己在這裏結了。任何建議表示讚賞。下面是在讀我的縮寫JSON文件當前代碼

<html> 
<head> 
    <title>Springy.js image node demo</title> 
</head> 
<body> 
<script src="jquery-1.11.3.js"></script> 
<script src="springy.js"></script> 
<script src="springyui.js"></script> 

<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>--> 

<script/> 
$(document).ready(function(){ 
    $.ajax({ 
    url: 'https://rawgit.com/theresajbecker/CompBio/master/SuperSmallNodes.json', 
    type: 'GET', 
    dataType: 'json' 
    }).done(function(graphP) { 

    console.log(graphP); 


    var graph = new Springy.Graph(); 

    for (i = 0 ; i < graphP.elements.nodes.length ; i++) { 
     var nodeArray = [] 
     var Nlabel1 = graphP.elements.nodes[i].data.label 
     var Nlabel2 = graphP.elements.nodes[i++].data.label 
     console.log('Nlabel1') 
     console.log(Nlabel1) 
     console.log('Nlabel2') 
     console.log(Nlabel2) 
     var NN1 = graph.newNode({label: Nlabel1}) 
     var NN2 = graph.newNode({label: Nlabel2}) 
     nodeArray.push(NN1) 
     nodeArray.push(NN2) 
     graph.newEdge(NN1,NN2, {weight: .5}) 

               } 
    console.log('NODE ARRAY') 
    console.log(nodeArray) 



     console.log('WINDOW') 
jQuery(function(){ 
    var springy = window.springy = jQuery('#springydemo').springy({ 
    graph: graph, 
    nodeSelected: function(node){ 
     console.log('Node selected: ' + JSON.stringify(node.data)); 
    } 
    }); 
}); 

    }); 


}); 
</script> 
    <div> 
<canvas id="springydemo" width="800" height="400" style="border: 1px solid black;"></canvas> 
</div> 


</body> 
</html> 

回答

0

至少,我想你會想初始化nodeArray循環外:

var nodeArray = [] 
for (i = 0 ; i < graphP.elements.nodes.length ; i++) { 

原樣,重新將在每個循環初始化將解釋的長度1.

0

我顯然已經如此專注於其他問題,我沒有看到我正在初始化我的數組在循環內。天才。然而,作爲參考,這裏是我如何能夠將sourceNode和targetNode對象傳遞給newEdge函數。

<html> 
<head> 
    <title>Springy.js image node demo</title> 
</head> 
<body> 
<script src="jquery-1.11.3.js"></script> 
<script src="springy.js"></script> 
<script src="springyui.js"></script> 

<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>--> 

<script/> 
$(document).ready(function(){ 
    $.ajax({ 
    url: 'https://rawgit.com/theresajbecker/CompBio/master/SuperSmallNodes.json', 
    type: 'GET', 
    dataType: 'json' 
    }).done(function(graphP) { 

    console.log(graphP); 


    var graph = new Springy.Graph(); 
    var nodeArray = [] 

    for (i = 0 ; i < graphP.elements.nodes.length ; i++) { 
     var Nlabel1 = graphP.elements.nodes[i].data.label 
     var Nmass = graphP.elements.nodes[i].data.mass 

     var NN1 = graph.newNode({label: Nlabel1}, {'text-outline-width': Nmass}); 
     nodeArray.push(NN1) 
     } 
     console.log(nodeArray) 

     function getByValue(arr, value) { 
      for (var n=0; n < nodeArray.length; n++) { 
      if (arr[n].data.label == value) { 
      console.log("below should be the object of element") 
      return arr[n]; 
      } 
      } 
     } 


     function getSourceNode(graphP) { 
      for (var s=0; s < graphP.elements.edges.length; s++) { 
      var getSource = graphP.elements.edges[s].data.source 
      var getTarget = graphP.elements.edges[s].data.target 
      graph.newEdge(getByValue(nodeArray, getSource),getByValue(nodeArray, getTarget)); 

     } 
     } 

    getSourceNode(graphP) 


     console.log('WINDOW') 
jQuery(function(){ 
    var springy = window.springy = jQuery('#springydemo').springy({ 
    graph: graph, 
    nodeSelected: function(node){ 
     console.log('Node selected: ' + JSON.stringify(node.data)); 
    } 
    }); 
}); 

    }); 


}); 
</script> 
    <div> 
<canvas id="springydemo" width="800" height="400" style="border: 1px solid black;"></canvas> 
</div> 


</body> 
</html>