SVG circles don't get repositioned when zooming leaflet map

Question

I'm using d3 to add svg circles on leaflet map. My fiddle is here http://jsfiddle.net/nextstopsun/C3U8g/

I've added a reset() function to map viewreset event to calculate transformation for svg g element containing all circles. This function is called on map viewreset event.

    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] + ")");

(The code is originally from this example http://bost.ocks.org/mike/leaflet/)

I can see that the transformation parameters for g element are being recalculated, but circles aren't repositioned (or they are repositioned wrong) and don't align with the map tilelayer. Everything is ok when paning map, though. What has to be changed for proper repositioning on zooming?

Answer 1

In addition to transforming the g element that contains the circles, you also need to reset the coordinates of the circles themselves:

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

Updated jsfiddle here.