D3js:如何通过鼠标单击获取纬度/对数地理坐标

D3js: how to get Lat/Log geocoordinates from mouse click?

本文关键字：坐标 纬度 获取 何通过 鼠标 单击 D3js      更新时间：2023-09-26

使用一些 D3js 代码和投影的 topojson 数据在任何投影的地图数据可视化上，如何获取地理坐标？这样的东西：

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

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

欢迎链接到演示。

编辑：相关演示列表：

  • 开放层演示...但我们什么D3js。
  • 杰森·戴维斯/旋转/使用projection.invert(d3.mouse(this))
使用

d3.mouse 获取像素坐标，然后使用投影（此处为 d3.geo.azimuthal）将 x 和 y 反转为经度和纬度。例如：

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

如果你想支持点击SVG的背景，你可能还需要一个不可见的矩形，上面有指针事件：all。（另请注意：旧版本的 D3 使用 d3.svg.mouse 而不是 d3.mouse。

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

相关文章：