D3.js 使用d3.geo.tile打印点

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

但我似乎不知道如何在这张地图上放置点，使它们可以集成在缩放中。路径工作正常，但似乎修改后的投影无法用于投影点的坐标，并且在缩放函数中，当应用于包含点的元素时，将scale（）添加到transform（）中似乎会将点缩放到如此大的程度，以至于它们填满整个屏幕。以下是我的补充观点：

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（）中的函数：

---

我也尝试过为网站添加单独的元素，但没有成功。有人举过在geo.tile上加点数的例子吗？

我设法弄明白了。我的主要问题是，在正确投影点时，我没有缩放圆的“r”属性以匹配zoom.scale（），这导致它们的半径为13000px+

您可以看到它在这里工作：

---

我知道这是一篇老文章，但我一直在关注您的block示例，当路径是简单的点到点路径时遇到了一个bug。我不确定发生了什么，但如果你有一些想法要分享，我会非常感激。

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