Question

我在此示例中一直在扩展代码：

http://bl.ocks.org/mbostock/5914438

但我似乎无法弄清楚如何在这张地图上放置点，以便将它们集成到缩放中。路径工作正常，但似乎修改后的投影不能用于投影点的坐标，而在缩放函数中，当应用于包含点的元素时，transform（）的scale（）加法似乎缩放点以使它们填满整个屏幕。这是我的附加要点：

var sitesG = svg.append("g").attr("id","sitesG");
var osites = sitesG.selectAll(".sites")
 .data(sites)
 .enter()
 .append("g")
 .attr("transform", function(d) {return "translate(" + projection([d.x,d.y]) + ")scale(" + projection.scale() + ")"})

osites.append("circle").attr("r", 10)

以下是zoom（）中的函数：

d3.select("#sitesG")
  .attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")")

我已尝试过针对网站的个别元素，但没有成功。有没有人有一个将点放在geo.tile上的例子？

Answer 1

我设法搞清楚了。我的主要问题是当我正确地投射点时，我没有缩放圆圈的“r”属性以匹配zoom.scale（），这导致它们具有13,000px +半径。

你可以看到它在这里工作： http://bl.ocks.org/emeeks/6147081

使用d3.geo.tile绘制点

1 个答案: