使用強制佈局從兩個不同的csv文件讀取節點和邊緣

Question

嘗試使用強制佈局顯示圖形時出現問題。我使用兩個csv文件，一個用於頂點，另一個用於邊緣。我不確定，但我認爲，因爲d3.csv方法是異步的，並且我使用了其中兩個，所以我需要將另一個插入另一箇中以避免「併發」問題（最初我嘗試調用d3。 csv兩次和分開，我有麻煩）。

我的CSV的結構如下：

對於邊緣：

source,target 
2,3 
2,5 
2,6 
3,4 

對於節點：

index,name 
1,feature1 
2,feature2 
3,feature3 

我最初的嘗試是：

// create the force layout 
var force = d3.layout.force() 
    .charge(-120) 
    .linkDistance(30) 
    .size([width, height]); 

var node, linked; 

// we read the edges 
d3.csv("csvEdges.csv", function(error, data) { 
    edg = data; 

    // we read the vertices 
    d3.csv("csvVertices.csv", function(error2, data2) { 
     ver = data2; 

     force.nodes(data2) 
      .links(data) 
      .start(); 

     node = svg.selectAll(".node") 
      .data(data2) 
      .enter() 
      .append("circle") 
      .attr("class", "node") 
      .attr("r", 12) 
      .style("fill", function(d) { 
       return color(Math.round(Math.random()*18)); 
      }) 
      .call(force.drag); 

     linked = svg.selectAll(".link") 
      .data(data) 
      .enter() 
      .append("line") 
      .attr("class", "link"); 

     force.on("tick", function() { 
      linked.attr("x1", function(d) { return d.source.x; }) 
       .attr("y1", function(d) { return d.source.y; }) 
       .attr("x2", function(d) { return d.target.x; }) 
       .attr("y2", function(d) { return d.target.y; }); 

      node.attr("cx", function(d) { return d.x; }) 
       .attr("cy", function(d) { return d.y; }); 
     }); 

但我得到：

"TypeError: Cannot call method 'push' of undefined." 

我不知道是什麼問題;我認爲這與鏈接的推動有關。我讀到，也許這個問題與d3如何匹配節點對象的鏈接有關（在這種情況下，我的節點有兩個字段）。所以，我想下面的（我看到這個問題在其它位置）：

// we read the edges 
d3.csv("csvEdges.csv", function(error, data) { 
    edg = data; 

    // we read the vertices 
    d3.csv("csvVertices.csv", function(error2, data2) { 
     ver = data2; 

     force.nodes(data2) 
      .start(); 
      //.links(data); 

     var findNode = function(id) { 
      for (var i in force.nodes()) { 
       if (force.nodes()[i]["index"] == id) return force.nodes()[i] 
      }; 
      return null; 
     }; 

     var pushLink = function (link) { 
      //console.log(link) 
      if(findNode(link.source)!= null && findNode(link.target)!= null) {   
       force.links().push ({ 
        "source":findNode(link.source), 
      "target":findNode(link.target) 
      }) 
      } 
     }; 

     data.forEach(pushLink); 

[...] 

但在這種情況下，我得到了一堆：

Error: Invalid value for <circle> attribute cy="NaN" 

，我不知道有什麼問題，在此案件！

Answer 1

我所看到的做法是使用queue.js對函數進行排隊，如Elijah Meeks在書中的「D3.js in Action」中所述。曼寧網站的第6章示例代碼見清單6.7。 （買的書，這是相當不錯的），這裏是稍微適應於您的使用案例的基本結構：

<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script> 
    queue() 
    .defer(d3.csv, "csvVertices.csv") 
    .defer(d3.csv, "csvEdges.csv") 
    .await(function(error, file1, file2) {createForceLayout(file1, file2);}); 
    function createForceLayout(nodes, edges) { 
    var nodeHash = {}; 
    for (x in nodes) { 
     nodeHash[nodes[x].id] = nodes[x]; 
    } 
    for (x in edges) { 
     edges[x].weight = 1; //you have no weight 
     edges[x].source = nodeHash[edges[x].source]; 
     edges[x].target = nodeHash[edges[x].target]; 
    } 
    force = d3.layout.force() 
     .charge(-1000) 
     .gravity(.3) 
     .linkDistance(50) 
     .size([500,500]) 
     .nodes(nodes) 
     .links(edges); 
     //etc.