Javascript 使用Force Layout从两个不同的csv文件读取节点和边

我在尝试使用force布局显示图形时遇到问题。我使用两个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如何匹配节点对象的链接有关（在本例中，我的节点有两个字段）。因此，我尝试了以下方法（我在这里的其他问题中看到了这一点）：

但在这种情况下，我得到了一系列：

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

错误：属性cy=“NaN”的值无效

---

我不知道这个案子有什么问题

我看到的方法是使用queue.js对函数进行排队，正如Elijah Meeks在《D3.js在行动》一书中所描述的那样。Manning网站上有第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.

队列（）
.defer（d3.csv，“csvVertices.csv”）
.defer（d3.csv，“csvEdges.csv”）
.await（函数（错误，file1，file2）{createForceLayout（file1，file2）；}）；
函数createForceLayout（节点、边）{
var nodeHash={}；
对于（节点中的x）{
nodeHash[nodes[x].id]=节点[x]；
}
用于（边中的x）{
边[x]。权重=1；//您没有权重
边[x].source=nodeHash[edges[x].source]；
边[x].target=nodeHash[edges[x].target]；
}
force=d3.layout.force（）
。收费（-1000）
重力（.3）
.linkDistance（50）
.尺寸（[500500]）
.节点（节点）
.连接（边缘）；
//等等。

您解决过这个问题吗？我面临着类似的情况，我想知道您是如何处理的。您想构建什么？

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