SVG-Kreise werden beim Zoomen der Flugblattkarte nicht neu positioniert

Question

Ich benutze d3, um SVG-Kreise auf der Flugblatt-Karte hinzuzufügen. Meine Geige ist hier http://jsfiddle.net/nextstopsun/C3U8g/

Ich habe eine reset() - Funktion hinzugefügt, um das Viewreset-Ereignis zu berechnen, um die Transformation für das SVG-Element zu berechnen, das alle Kreise enthält. Diese Funktion wird im map-Viewreset-Ereignis aufgerufen.

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

(Der Code ist ursprünglich aus diesem Beispiel http://bost.ocks.org/mike/leaflet/)

I kann sehen, dass die Transformationsparameter für g Element neu berechnet werden, sondern Kreise nicht neu positioniert werden (oder sie falsch positioniert) und Don nicht mit dem Kartenplättchen ausrichten. Alles ist in Ordnung, wenn paning Karte, obwohl. Was muss für eine korrekte Neupositionierung beim Zoomen geändert werden?

Answer 1

Neben dem g Element zu verwandeln, die die Kreise enthält, müssen Sie auch die Koordinaten der Kreise zurückgesetzt selbst:

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

Aktualisiert jsfiddle here.