Блог

Я работаю над картой на основе примера 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);
  

в конечном итоге будет нарисован только один набор кругов. Я предполагаю, что это связано с тем, что функция преобразования применяется только к последнему определенному набору кругов? Как я могу добавить еще один набор кругов на карту?

Ваш код добавляет круги к кругам. Это приводит к недопустимому 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);