Question

在地图dataviz any projection上使用一些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))

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

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

2 个答案: