D3.jsを使用してマップ上のノードとエッジのネットワークをプロット

Question

D3.jsを使用して、それらの間の位置と接続のネットワークをプロットしようとしています。ネットワーク情報を含む2つのファイル "nodes.csv"と "edges.csv"があります。私は、Gephiのgeolayoutプラグインを使用するのと同様の最終結果を得ることを望んでいます。

nodes.csvファイルは次の形式は次のとおりです。

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

そしてedges.csvの形式は次のとおりです。

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

私が正常にノードをプロットすることができましたマップには含まれていますが、ノードのラインを参照するために、edges.csvのソース値とターゲット値を使用する方法が不明です。 D3行の開始点と終了点を「ルックアップ」するために、メモリ内のすべてのノードをどのようにロードするのですか？これらのCSVをJSON形式に変換する方が良いですか？私の作業ノードのプロットに対する参考になる批評も歓迎します。

はここだけのノードでの作業のコードへのリンクがプロットされます：http://bl.ocks.org/almsuarez/1173e4cabbcfd032642e

Answer 1

を「結ぶ」線を描画するには、ここで私はそれをコーディングする方法をです：

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

}); 

example作業のフル。