Question

我正在尝试在Mike Bostock创建的以下地图上的某些地理位置添加红点。 https://bl.ocks.org/mbostock/3795040。我的观点出现了，但不随地图移动。如何编辑代码以使点随地图移动。谢谢。

//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];

Answer 1

您必须在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：https://bl.ocks.org/anonymous/2a6f07cdc12838b296674470ad715bbe/54d6de8d73347081f900c88a203019df74f23ade

PS：有些圈子看起来行动不对：他们是正确的。问题是他们落后于全球。要隐藏这些圆圈，您必须编写另一个函数（这不在本答案的范围内）。

隐藏地球背后的圆圈的替代方法是使用path代替圆圈。这样，投影将自动剪辑这些路径。看看：https://bl.ocks.org/anonymous/9e640195e2c021cd79b5ca9b2238a44c/1c43719a7d6a85d0226cf3c468ac23e570add22d

如何在正交映射中移动点？

1 个答案: