2

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

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)

这是 zoomed() 中的函数：

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

我也尝试过使用网站的单个元素，但没有成功。有没有人有一个在geo.tile上放点的例子？

4

1 回答 1

2

我设法弄清楚了。我的主要问题是，当我正确投影点时，我没有缩放圆圈的“r”属性以匹配 zoom.scale()，这导致它们具有 13,000 像素以上的半径。

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

于 2013-08-03T16:50:53.797 回答