Vòng tròn SVG không được định vị lại khi phóng to bản đồ tờ rơi

Question

Tôi đang sử dụng d3 để thêm vòng tròn svg trên bản đồ tờ rơi. Fiddle của tôi ở đây http://jsfiddle.net/nextstopsun/C3U8g/

Tôi đã thêm hàm reset() vào sự kiện sắp xếp bản đồ để tính toán chuyển đổi cho phần tử svg g chứa tất cả các vòng kết nối. Hàm này được gọi trên sự kiện sắp xếp bản đồ.

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

(Mã này có nguồn gốc từ ví dụ này http://bost.ocks.org/mike/leaflet/)

tôi có thể thấy rằng các tham số chuyển đổi cho các phần tử g đang được tính lại, nhưng vòng tròn không thay đổi vị trí (hoặc họ đang thay đổi vị trí sai) và don không phù hợp với tilelayer bản đồ. Mọi thứ đều ổn khi bạn lướt bản đồ. Điều gì phải được thay đổi để định vị lại đúng cách khi phóng to?

Answer 1

Ngoài chuyển các yếu tố g có chứa các vòng tròn, bạn cũng cần phải thiết lập lại các tọa độ của các vòng tròn mình:

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

Cập nhật jsfiddle here.