D3js:如何从鼠标点击获取Lat/LogGeo坐标？

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的背景，您可能还需要一个带有指针事件的不可见的rect : all。(还请注意:较早版本的D3使用的是d3.svg.mouse而不是d3鼠标。)

Answer 2

杰森·戴维斯/轮调/对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