SVG circles do not move when scaling the elevator map

Question

I use d3 to add svg circles on the elevator map. My fiddle is here http://jsfiddle.net/nextstopsun/C3U8g/

I added a reset () function to display the viewreset event to calculate the conversion for the svg g element containing all the circles. This function is called on a map display 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 comes from this example http://bost.ocks.org/mike/leaflet/ )

I see that the transformation parameters for the g-element are recounted, but the circles are not rearranged (or they are incorrectly rearranged) and do not align with the type of layers. However, everything is fine. What needs to be changed for the correct position change when scaling?

Answer 1

In addition to transforming the g element containing 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 .