Question

我在基于mbostock示例的地图上工作（完整示例位于https://bl.ocks.org/mbostock/899711）。它在谷歌地图上的不同点叠加了几个d3.js圆圈。我想添加第二组圆圈，这些圆圈略微偏离原始点，因此每个点都有一个红色和一个蓝色圆圈。

但是，我不确定如何绘制圆圈本身。有一个应用的转换函数：

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

使用d3.js将多个地图元素添加到Google地图

1 个答案: