Добавить несколько элементов карты с d3.js на карту google

Question

Я работаю над картой, основанной на примере mbostock (полный пример: https://bl.ocks.org/mbostock/899711). Он накладывает несколько кругов d3.js в разных точках на карте google. Я бы хотел добавить второй набор кругов, слегка отклоненных от исходных точек, так что каждая точка имеет красный и синий круг.

Я не уверен в том, как рисуются сами круги. Существует функция преобразования, которая применяется:

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