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

地図情報をD3で使えるJSON形式に

地図情報をJSON形式にしてD3.js等で表示させるために、以下のページが参考になる。
http://ja.d3js.node.ws/blocks/mike/map/

そして、国土数値情報というサイトにデータがある。
http://nlftp.mlit.go.jp/ksj/
利用規約をよく読み、ダウンロード。

以下のページに非常に親切な解説があった。
http://blog.hitsuji.me/make-shape-file/
親切で感謝です。
こちらも参考になりました。
http://kshigeru.blogspot.jp/2013/03/d3-geojson-polygon.html

そして、以下のページは日本語にも訳されており、基本を網羅してくださっているページなので、とても大事。
http://ja.d3js.node.ws/blocks/mike/map/
勉強になります。（筆者はD3の開発者さんですね。）


で、国土地理院から.shpデータを落とし、
それを親切なサイトさんで紹介してあってインストールしたQGISにてgeoJSON形式に変換し、
terminalにてtopoJSONに変換して、表示。

が、中心座標をその県の中心座標にしないと表示が真っ白で「あれれ？」となりました。
中心座標を緯度経度で決め、表示スケールを決めてみると、無事表示されました。

よかった！

参考：QGIS入門

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

補足1：topojson -p N03_004 -o hokkaido_topo.json hokkaido.geojson
　といった形で、propertyをN03_004で市区町村データを保持してやり、-oでアウトプット。
　東京の場合は「区」のデータが抜けるので、N03_003も加えてある必要あり。
　topojson -p N03_004 -p N03_003 -o tokyo_topo.json tokyo.geojson

　複数県に渡る場合は、N03_001の県情報も加えてやる必要があるかもしれず、その場合はN03_001を加え、「d.properties.N03_001」などでアクセスすると吉。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

補足2：geoJSONを生成する際に、「OGR error:Failed to create GeoJSON datasource:」というようなエラーが出て悩みました。
単純に、「Save as」のところで「Browse」をクリックして、保存先フォルダを選ぶ必要があっただけでした。。。こちらのページが参考になりました。感謝。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

追記1：topoJSONに変換しても、頂点データ数が多すぎて表示が重いので、減らす方法を探すと、便利なサイトがありました！！
感激しました。。。
大感謝です。
http://www.mapshaper.org/

ここにgeoJSONやtopoJSONをアップするだけ。
そして、頂点数を減らしていくと、1.1MBだったファイルが65kBなどに。。。
すごいっす。
（私のsafariでは変換後のデータをDLできず、chromeではOKでした。）

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

追記2：command lineでtopoJSONに変換する際、ファイルサイズが大きいとrun out of memoryとなる。そこで解決策をググると、
https://github.com/mbostock/topojson/issues/71
こんなページがありました。
試してみます。。。