javascript - D3js:マウスクリックから緯度/対数の地理座標を取得する方法は?

Question

いくつかの D3js コードと投影された topojson データを任意の投影のマップ dataviz で使用すると、どうすれば地理座標を取得できますか? そのようなもの：

var svg = d3.select("#viz").append("svg:svg")
 .attr("width", 320)
 .attr("height", 200)
 .on("mousedown", mousedown)
 .on("click", mouselocation);

D3jsマップの視覚化をクリックして地理座標を取得する方法は?

デモへのリンクは歓迎します。

---

編集:関連するデモのリスト:

• OpenLayers のデモ... しかし、D3js とは何か。
• Jason Davies/回転/使用projection.invert(d3.mouse(this))

Answer 1

d3.mouseを使用してピクセル座標を取得し、投影 (ここではd3.geo.azimuthal ) を使用してxとyを経度と緯度に反転します。例えば：

d3.select("svg").on("mousedown.log", function() {
  console.log(projection.invert(d3.mouse(this)));
});

SVG の背景でのクリックをサポートしたい場合は、pointer-events: all を含む非表示の四角形も必要になる場合があります。(注意: 古いバージョンの D3 では、d3.mouse ではなく d3.svg.mouse が使用されていました。)

Answer 2

Jason Davies/rotate/の使用projection.invert(d3.mouse(this))は素晴らしく、一見の価値があります。

.on("mousedown.grab", function() { var point; if (mousePoint) point = svg.insert("path", ".foreground") .datum({type: "Point", coordinates: projection.invert(d3.mouse(this))}) .attr("class", "point") .attr("d", path); // add back the point