Plot Netzwerk von Knoten und Kanten auf Karte mit D3.js

Question

Ich versuche, ein Netzwerk von Standorten und Verbindungen zwischen ihnen mit D3.js plotten. Ich habe zwei Dateien, "nodes.csv" und "edges.csv", die meine Netzwerkinformationen enthalten. Ich hoffe auf ein Endergebnis ähnlich wie bei der Verwendung von Gephis geolayout Plugin.

Die nodes.csv Datei ist im folgende Format:

+-----+-----+-----------+-------------+ 
| Id | ... | Lat |  Lon  | 
+-----+-----+-----------+-------------+ 
| 123 | ... | 38.889931 | -77.009003 | 
| 145 | ... | 40.730610 | -73.935242 | 
| 198 | ... | 34.052235 | -118.243683 | 
+-----+-----+-----------+-------------+ 

Und edges.csv hat folgendes Format:

+--------+--------+ 
| source | target | 
+--------+--------+ 
| 123 | 145 | 
| 198 | 165 | 
| 198 | 173 | 
+--------+--------+ 

Ich habe in der Lage, erfolgreich die Knoten auf einem Grundstück map, bin mir aber nicht sicher, wie ich die Quell- und Zielwerte meiner codes.csv verwenden kann, um auf Zeilen in den Knoten zu verweisen. Wie würde ich alle Knoten im Speicher laden, um Start- und Endpunkte für D3-Leitungen nachzuschlagen? Ist es besser, diese CSVs in ein JSON-Format zu konvertieren? Jede hilfreiche Kritik an meinem Arbeitsknotenpunkt ist ebenfalls willkommen.

Hier ist ein Link zu arbeiten Code mit nur Knoten aufgetragen: http://bl.ocks.org/almsuarez/1173e4cabbcfd032642e

Answer 1

Um die "Verknüpfung" Linien zu zeichnen, ist hier, wie ich würde es Code:

// grab the edges data 
d3.csv("edges.csv", function(error, edges){ 

    // create a map of our nodes for faster lookups 
    var nodesById = d3.map(nodes.data(), function(d){ 
    return d.key; 
    }); 

    // loop the edges 
    edges.forEach(function(d){ 

    // get pixel coordinates 
    var p1 = projection([nodesById.get(d.source).lon, nodesById.get(d.source).lat]), 
     p2 = projection([nodesById.get(d.target).lon, nodesById.get(d.target).lat]); 

    // append the line 
    svg.append("line") 
     .attr("x1", p1[0]) 
     .attr("x2", p2[0]) 
     .attr("y1", p1[1]) 
     .attr("y2", p2[1]) 
     .style("stroke", "steelblue") 
    }); 

}); 

Vollarbeits example.