D3.jsで緯度経度をクリックで取得

D3ではありがたいことに、緯度経度をgeoJSONやtopoJSONからpixel変換した位置でmousedownにて取得することも可能。

そのためには、
 projection.invert(point)
を使う。
https://github.com/mbostock/d3/wiki/Geo-Projections#invert
x,yを[x,y]の形で配列で返してくれる。

d3.mouse(this)でmouseクリック位置を取得してくれるので、これを使用。

ついでに、mouseクリックしたあたりに緯度経度を表示させたいので、
d3.event.pageXをつかってその位置に表示。

で、できたコードは以下のような感じです。
（緯度経度が非常に低い桁数まで表示されるので、toFixedで適当に丸めています。）

d3.select("svg").on("mousedown.log", function(d) {
   var latlon = svg.selectAll(".result");
   latlon.remove();
   var pointNow = projection.invert(d3.mouse(this));
   var fixedX = Number(pointNow[0]).toFixed(3);
   var fixedY = Number(pointNow[1]).toFixed(3);
   svg.append("text").attr("class","result").attr("x",d3.event.pageX ).attr("y",d3.event.pageY).text("results:" + fixedX+","+fixedY);
  });