Question

我在D3中呈现的美国地图类似于此处：http://bl.ocks.org/mbostock/2206590

我通过albersUSA将圈子投射到地图上，如下所示：

var site = map.append("circle").attr("r",5).attr("transform", function() {
    return "translate(" + projection([value.longitude,value.latitude]) + ")";
});

点击地图后，州和县将被翻译和缩放。

然而，纬度/经度投影是偏离的，并且不会相应地移动。我试过了：

site.transition()
   .duration(1000)
   .attr(
        "transform",
        "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" +    projection(-x + "," + -y) + ")"
   )

然而，这并没有投射到正确的位置。

这是点击功能：

function clicked(d) {
    console.log("click");
    var x, y, k;

    if (d && centered !== d) {
        var centroid = path.centroid(d);
        x = centroid[0];
        y = centroid[1];
        k = 4;
        centered = d;
    } else {
        x = width / 2;
        y = height / 2;
        k = 1;
        centered = null;
    }

    counties.selectAll("path")
        .classed("active", centered && function (d) {
            return d === centered;
        });

    counties.transition()
        .duration(750)
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
        .style("stroke-width", 1.5 / k + "px");

    states.transition()
        .duration(750)
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
        .style("stroke-width", 1.5 / k + "px");

    for (var i = 0; i < sys_list.length; i++) {
        console.log(sys_list[i]);

        sys_list[i].transition()
            .duration(1000)
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + projection(-x + "," + -y) + ")")
    }
}

谢谢，所有的帮助将不胜感激！

缩放后在地图上重新投影lat / long

0 个答案: