D3を使用して地図上に緯度経度座標をレンダリングするにはどうすればよいですか？

米国の地図の上に、経度と緯度の座標の任意のセットのドットを重ねようとしています。

これまでのところ、D3地図作成の例が見つかりましたが、X、Yピクセル座標にドットを配置しようとすると、キャンバスから外れて表示されます。d3の座標系を含むワークショットの講義ノートを見つけましたが、緯度/ 経度の座標を地図に表示する方法がまだわかりません。

これは私がこれまでに持っているものです（ほとんどアメリカの地図だけです）

この作品の作り方に関するアドバイスは大歓迎です！

latおよびlongのポイントをマップに投影するには、projection（）関数が必要です。デフォルトでは、d3ジオパスはalbersUsaプロジェクションを使用するため、明示的に宣言できます。

var projection = d3.geo.albersUsa();

これは、AlbersUsaを使用しない例で行われ、プロジェクションを定義することで修正できます。定義すると、関数として使用できるようになります。これにより、ポイントをsvgサークルとして配置できます。

svg.append("circle").attr("r",5).attr("transform", function() {return "translate(" + projection([-75,43]) + ")";});

ニューヨークの大まかな周辺に円を落とすはずです。次に、属性として「lat」および「long」を持つデータをバインドできます。この場合、次のようになります。

 svg.selectAll("circles.points")
.data(yourData)
.enter()
.append("circle")
.attr("r",5)
.attr("transform", function(d) {return "translate(" + projection([d.long,d.lat]) + ")";});

投影関数は[long、lat]配列を受け取り、[x、y]配列を返します。これは、transform、translate（）構文にうまく適合します。または、x値とy値の配列を分割できます。

以下の例では、ポリゴン、ライン、ポイントを配置し、csvからポイントを取得してマップに投影していますが、g要素を変換し、その要素に円を追加していることに注意してください（ラベルまたは他のアスペクトも必要な場合があります）その投影されたg要素にすべてが追加されるサイトへ）：

https://gist.github.com/4414107 http://bl.ocks.org/d/4414107/