D3饼图从地图中剥离

Question

我从一个示例地图应用程序开始：http://bl.ocks.org/d3noob/raw/5193723/

我想放置一个自定义饼图，如下图所示。我在创建圆圈之后添加了代码片段，创建了一个代码片段。

饼-图表片段

        var r=10;
        var p = Math.PI*2;

        var arc = d3.svg.arc()
                .innerRadius(r-3)
                .outerRadius(r)
                .startAngle(0)
                .endAngle(p* d.value1);
        var arc2 = d3.svg.arc()
                .innerRadius(r-7)
                .outerRadius(r-4)
                .startAngle(0)
                .endAngle(p* d.value2);

        g.append("path")
                .attr("d", arc)
                .attr("fill", "red")
                .attr("transform", "translate(400,500)");
        g.append("path")
                .attr("d", arc2)
                .attr("fill", "orange")
                .attr("transform", "translate(400,500)");

如下面泰国附近的图片所示，它表现得很好：

​

问题

1. 当我缩放或移动地图时，饼图就消失了，但圆圈保持原样。有人能帮我理解一下吗？
2. 人们可以注意到一种非常粗糙的弧线绘制方式。这张饼形图预计将为每个城市绘制.我正在寻找一种更清洁的方式，就像画圆圈一样。

Answer 1

缩放发生时运行的代码。

    g.selectAll("path")  
        .attr("d", path.projection(projection)); 

是选择所有路径并修改它们的"d"属性。因为它是“泛型的”，所以它只是在寻找paths，所以它也抓住了您创建的甜甜圈路径并修改它们(可能将它们设置为空字符串或NaNs)。

您可以通过将甜甜圈从geo路径的相同g中取出来解决这一问题，这样它们就不会被选中。或，您可以使您的"path"选择器更具体，方法是在所有geo路径中添加一些类(例如"geo")，并在选择它们时使用该类(例如g.selectAll("path.geo"))。