Hinzufügen mehrerer Kartenelemente mit d3.js zu einer Google Map

Question

Ich arbeite an einer Karte basierend auf einem mobostock Beispiel (vollständiges Beispiel ist https://bl.ocks.org/mbostock/899711). Es überlagert mehrere d3.js Kreise an verschiedenen Stellen einer Google Map. Ich würde gerne einen zweiten Satz von Kreisen hinzufügen, die von den ursprünglichen Punkten leicht dezentriert sind, so dass jeder Punkt einen roten und einen blauen Kreis hat.

Ich bin mir nicht sicher, wie die Kreise selbst gezeichnet werden. Es gibt eine Transformationsfunktion, die angewendet wird:

function transform(d) { 
    d = new google.maps.LatLng(d.value[1], d.value[0]); 
    d = projection.fromLatLngToDivPixel(d); 
    return d3.select(this) 
     .style("left", (d.x - padding) + "px") 
     .style("top", (d.y - padding) + "px"); 
    } 

und an jedem Punkt angewendet unter Verwendung each. Wenn ich versuche, die beiden Kreise zu zeichnen, indem Sie einfach einen anderen Satz von Kreisen bis zu dem Punkt hinzugefügt werden, wobei die Kreise angehängt werden:

marker.append("circle") 
     .attr("r", 4.5) 
     .attr("cx", padding) 
     .attr("cy", padding) 
    .append("circle") 
     .attr("r", 4.5) 
     .attr("cx", padding + 30) 
     .attr("cy", padding + 30); 

nur einen Satz von Kreisen endet gezogen werden. Ich nehme an, das hat damit zu tun, dass die Transformationsfunktion nur auf die letzte Gruppe von Kreisen angewendet wird, die definiert ist? Wie kann ich der Karte einen weiteren Satz Kreise hinzufügen?

Answer 1

Ihr Code fügt Kreise an Kreise an. Dies führt zu ungültigem SVG, Kreise können keine Kinder von Kreisen sein.

Verketten Sie das .append nicht.

marker.append("circle") 
     .attr("r", 4.5) 
     .attr("cx", padding) 
     .attr("cy", padding); 

marker.append("circle") 
     .attr("r", 4.5) 
     .attr("cx", padding + 30) 
     .attr("cy", padding + 30);