缩放传单地图时,SVG圈不会重新定位

Question

我正在使用d3在传单地图上添加svg圆圈.我的小提琴在这里http://jsfiddle.net/nextstopsun/C3U8g/

我添加了一个reset()函数来映射viewreset事件,以计算包含所有圆的svg g元素的转换.在map viewreset事件上调用此函数.

    svg.attr("width", topRight[0] - bottomLeft[0])
    .attr("height", bottomLeft[1] - topRight[1])
    .style("margin-left", bottomLeft[0] + "px")
    .style("margin-top", topRight[1] + "px");
g.attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");

(该代码最初来自此示例http://bost.ocks.org/mike/leaflet/)

我可以看到g元素的转换参数正在重新计算,但圆圈没有重新定位(或者它们重新定位错误)并且不与地图tilelayer对齐.尽管如此,一切都很好.什么必须改变才能在缩放时正确重新定位？

Answer 1

除了转换g包含圆圈的元素外,您还需要重置圆圈的坐标:

circles.attr("cx", function (d) { return project([d.m4312, d.m4311])[0]; })
       .attr("cy", function (d) { return project([d.m4312, d.m4311])[1]; });

在这里更新了jsfiddle .