D3js：如何通过鼠标单击获取纬度/经度地理坐标？

Posted 2023-02-22

【中文标题】D3js：如何通过鼠标单击获取纬度/经度地理坐标？

【英文标题】：D3js: how to get Lat/Log geocoordinates from mouse click?

【发布时间】：2012-06-08 17:42:06

【问题描述】：

在any projection 的地图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 demo... 但我们是 D3js。 Jason Davies/rotate/使用projection.invert(d3.mouse(this))

【参考方案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。）

【讨论】：

您能否发布一个示例，说明如何添加可点击的不可见矩形？

嗨，谢谢，好的，我想我知道了，虽然它似乎没有立即响应点击。你能看一下吗bl.ocks.org/2876083也许我错过了什么。

【参考方案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