D3.js 如何在正交贴图中移动点？

我试图在Mike Bostock创建的以下地图上的某些地理位置添加红点。我的点显示出来，但不随地图移动。如何编辑代码以使点随地图移动。多谢各位

//add circles to svg
svg.selectAll("circle")
    .data([wr,pt,sd,jp,fm])
    .enter()
    .append("circle")
    .attr("cx", function (d) { console.log(projection(d)); return projection(d)[0]; })
    .attr("cy", function (d) { return projection(d)[1]; })
    .attr("r", "8px")
    .attr("fill", "red");

下面是上面的数组所引用的内容

//points
var wr = [32.6130007, -83.624201];
var pt = [48.9334357, 8.961208];
var sd = [32.715738, -117.1610838];
var jp = [35.6894875, 139.6917064];
var fm = [39.1137602, -76.7267773];

---

您必须在

mousemove

函数中包含圆圈：

svg.on("mousemove", function() {
    var p = d3.mouse(this);
    projection.rotate([λ(p[0]), φ(p[1])]);
    svg.selectAll("path").attr("d", path);

    //change the circles' positions here:
    svg.selectAll("circle").attr("cx", function(d) {
            console.log(projection(d));
            return projection(d)[0];
        })
        .attr("cy", function(d) {
            return projection(d)[1];
        })
});

以下是更新的bl.ocks：

PS：有些圆圈似乎移动错误：但它们是正确的。问题是他们在地球的后面。要隐藏这些圆圈，您必须编写另一个函数（这超出了本答案的范围）

---

隐藏地球仪后面的圆的另一种方法是使用

路径

而不是圆。这样，投影将自动剪裁这些路径。看一看：

@charlie检查新的bl.ock，使用路径而不是圆。