d3.jsのマップ要素をGoogleマップに追加

Question

私は地図上でmbostockの例に基づいて作業しています（例はhttps://bl.ocks.org/mbostock/899711です）。 Googleマップ上のさまざまな場所にいくつかのd3.jsサークルを重ね合わせます。私は元の点から少し離れた円の第2のセットを追加したいので、各点は赤と青の円を持っています。

サークル自体の描画方法はわかりませんが、

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"); 
    } 

とeachを使用して、各ポイントに適用：適用される変換機能があります。円の

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); 

だけ一組が描画されてしまう。私は単に円が付加されている点に円の別のセットを追加することによって、両方の円を描画しようとします。私はこれが定義されているサークルの最後のセットに適用されている変換関数と関係があると思いますか？別のサークルセットをマップに追加するにはどうすればよいですか？

Answer 1

あなたのコードはサークルをサークルに追加します。 SVGが無効になり、サークルをサークルの子にすることはできません。

.appendをチェーンしないでください。

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);