0

我有一张在 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) + ")")
    }
}

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

4

0 回答 0