Question

当用户拖动，移动地图时，我的地图投影和显示会出错（请参阅：https://realtimeceap.brc.tamus.edu）。

例如（重复事件）： 1.从下拉列表中选择一个字段条件。 2.从下拉列表中选择一个状态。 3.从下拉列表中选择一个县。 4.拖动地图或移动鼠标滚轮。 5.然后，从下拉列表中选择另一个州。地图不是以svg元素的中间为中心而是缩放，而不是缩放1.

感谢任何帮助。

我在选择状态时重置地图，如下所示：

function resetMap() {
    svg = d3.select("#svgMap2");

    var w = 728;
    var h = 500;

    var project = d3.geoAlbersUsa()
        .scale(1000)
        .translate([w / 2, h / 2]);

    var t = project.translate(); // the projection's default translation
    var scale = project.scale;

    //reset all features to original scale
    d3.select("#svgMap2").select("#counties").selectAll(".county")
        .transition()
        .duration(750)
        .style("stroke-width", "0.5px")
        .style("stroke", "#808080")
        .attr("transform", "translate(" + t[0] + "," + t[1] + ")scale(" + scale + ")");
}

Answer 1

已经有一段时间了，发现解决方案很简单。我需要将g元素的转换属性重置为null以重新定义它。我的svg = svgMap2 的id和我的g元素的id = 县。顺便说一下，我正在使用D3.js第4版。

function resetMap() {
    var k = 1;
    var t = [0, 0];
    svg = d3.select("#svgMap2")  

    d3.select("#svgMap2").select("#counties").selectAll(".county").classed("active", false);
    d3.select("#counties").attr("transform", null);

    svg.select("#counties").selectAll(".county")  //must use svg or it disables pan, zoom
        .attr("width", width)
        .attr("height", height)
        .style("stroke-width", "0.5px")
        .style("stroke", "#808080")
        .attr("transform", "translate(" + t[0] + "," + t[1] + ")scale(" + k + ")");
}

D3.js：如何在拖动，缩放或MouseMove事件之后居中svg贴图

1 个答案: