D3js:如何通过鼠标点击获取Lat/Log地理坐标？

Question

在任何投影的地图数据中使用一些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.)