添加節點和邊緣環通Cytoscape中喬木佈局

Question

我想在arbor.js layout.This代碼添加超過10個節點添加節點和邊緣喬木佈局Cytoscape的

elements: { 

      nodes: [ 
       { data : { id: b[0], faveBorderColor: "#AAAAAA", name: b[0], faveColor: "#EEB211", faveFontColor: "#ffffff" ,'link':'http://www.yahoo.com'} }, 
       { data : { id: a[0], name: a[0], faveColor: "#21526a", faveFontColor: "#fff"} }, 
       { data : { id: a[1], name: a[1], faveColor: "#21526a", faveFontColor: "#fff"} }, 
       { data : { id: a[2], name: a[2], faveColor: "#21526a", faveFontColor: "#fff"} }, 
       { data : { id: a[3], name: a[3], faveColor: "#21526a", faveFontColor: "#fff"} }, 
       { data : { id: a[4], name: a[4], faveColor: "#21526a", faveFontColor: "#fff"} } 
      ], //end "nodes" 

      edges: [ 
       { data : { target: a[0], source : b[0] } }, 
       { data : { target: a[1], source : b[0]} }, 
       { data : { target: a[2], source : b[0]} }, 
       { data : { target: a[3], source : b[0]} }, 
       { data : { target: a[4], source : b[0]} } 
      ]//end "edges" 
     },//end "elements" 

現在我有數百要添加的節點。 a []和b []是通過mysql動態獲取數據的數組。是否有機會循環遍歷節點，以便可以動態添加所有數據。

Answer 1

可以在一個循環中與cy.add()元素添加到圖形：

// assuming your graph object is available as 'cy' e.g. by 
var cy = cytoscape({ 
    container: document.getElementById('cy') 
}); 

a = your array 
b = the other array 

for (var i=0; i<a.length; i++) { 

    var name = a[i] 

    cy.add([ 
     {group: "nodes", data: {id: name, ... }}, 
     { group: "edges", data: { id: a[i]+b[0], source: a[i], target: b[0]},...} 
    ]) 
}; 

這將從陣列a添加的所有節點，並添加一個邊緣的b第一個元素。節點由其id和節點標識，現有的id不再被添加。如何確定連接a和b的哪些節點取決於您的數據結構。

您可以rerun the layout with：

cy.layout(...); 

Answer 2

感謝reply.It把我推在正確的方向。我用簡單的循環執行此操作，因爲我必須更改整個佈局才能實現此目的。

var demoNodes = []; 
var demoEdges = []; 

demoNodes.push({ 

    data: { 
     id: b[0], 
     name:b[0] 
    } 
}); 

for (var i = 0; i < a.length; i++) { 
    demoNodes.push({ 

     data: { 
      id: a[i], 
      name:a[i] 
     } 
    }); 
} 



for (var i = 0; i < a.length; i++) { 
    demoEdges.push({ 
     data: { 
      source: b[0], 
      target: a[i] 

     } 
    }); 
} 

，放在元素

elements: { 
      nodes: demoNodes, 
      edges: demoEdges 
     }, 

這些值它工作得非常好。