reading nodes and edges from two distinct csv files using Force Layout

Question

I have a problem when trying to display a graph using the force layout. I use two csv files, one for vertices and one for edges. I'm not sure, but I think that as the d3.csv method is asynchronous, and I'm using two of them, I need to insert one into the other to avoid "concurrency" issues (initially I tried to call d3.csv twice and separately, and I had troubles).

The structure of my csv's is the following:

For edges:

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

For nodes:

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

My initial attempt is:

 // 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; });
        }); 

But I get:

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

I don't know what's the problem; I think it is related to the push of links. I read that maybe the problem is related to how d3 matches links with nodes' objects (in this case, my nodes have two fields). So I tried the following (I saw this in other question here):

// 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);

[...]

But in this case I get a bunch of:

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

and I don't know what's the problem in this case!

Answer 1

The way I have seen to do this is to queue the functions using queue.js, as described in the book "D3.js in Action" by Elijah Meeks. Sample code for chapter 6 is on the Manning website, see listing 6.7. (and buy the book, it's quite good) here's the basic structure slightly adapted to your use case:

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