javascript - D3js：如何通过鼠标单击获取纬度/对数地理坐标？

Question

在任何投影的地图 dataviz 上使用一些 D3js 代码和投影的 topojson 数据，我怎样才能取回地理坐标？像这样的东西：

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

如何通过单击 D3js 地图可视化来获取地理坐标？

欢迎提供演示链接。

---

编辑：相关演示列表：

• OpenLayers 演示......但我们什么 D3js。
• 杰森戴维斯/旋转/使用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 的背景，您可能还需要一个带有指针事件的不可见矩形：全部。（另请注意：旧版本的 D3 使用 d3.svg.mouse 而不是 d3.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