D3.js kullanarak harita üzerinde düğümlerin ve kenarların çizimini çizin

Question

D3.js. kullanarak konumlar arası bağlantı ve bağlantılar kurmaya çalışıyorum. Ağ bilgilerimi içeren iki dosya, "nodes.csv" ve "edges.csv" var. Gephi'nin geolayout Eklentisini kullanmaya benzer bir sonuç elde etmeyi umuyorum.

nodes.csv dosyası aşağıdaki biçimi geçerli:

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

Ve edges.csv aşağıdaki biçimdedir: Bir başarıyla düğümleri çizdirmek başardık

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

map, ama edges.csv kaynağının ve hedef değerlerinin düğümlerdeki referans çizgilerine nasıl kullanılacağından emin değilim. D3 satırları için başlangıç ​​ve bitiş noktaları için "bakma" amacıyla belleğindeki tüm düğümleri nasıl yüklerim? Bu CSV'leri JSON biçimine dönüştürmek daha mı iyi? Benim çalışma düğümleri komplo hakkında herhangi bir yararlı eleştiri de bekliyoruz. Burada, http://bl.ocks.org/almsuarez/1173e4cabbcfd032642e

Answer 1

"bağlama" çizgiler çizmek için bunu nasıl kodlayacağınıza var:

Burada çizilen tek düğümlerle, çalışan kod için bir bağlantı example çalışan

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

}); 

Tam.