缩放传单地图时，SVG 圆圈不会重新定位答案

【问题标题】：SVG circles don't get repositioned when zooming leaflet map缩放传单地图时，SVG 圆圈不会重新定位
【发布时间】：2013-06-25 02:55:42
【问题描述】：

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

我添加了一个 reset() 函数来映射 viewreset 事件，以计算包含所有圆圈的 svg g 元素的转换。此函数在地图视图重置事件中调用。

    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 元素的转换参数，但是圆圈没有重新定位（或者它们重新定位错误）并且没有与地图切片图层对齐。不过，在平移地图时一切正常。为了在缩放时正确重新定位必须更改哪些内容？

【问题讨论】：

标签： javascript svg d3.js transform leaflet

【解决方案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 here.

【讨论】：