Javascript SVG圆不'；缩放传单地图时无法重新定位

我使用d3在传单地图上添加svg圆圈。 我的小提琴在这儿

我添加了一个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] + ")");

（代码源于此示例）

我可以看到g元素的变换参数正在重新计算，但是圆没有重新定位（或者重新定位错误），并且没有与贴图平铺层对齐。 不过，平移地图时一切都正常。

---

要在缩放时正确重新定位，必须更改哪些内容？

除了转换包含圆的

g

元素外，还需要重置圆本身的坐标：

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

更新的JSFIDLE