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"属性。因为它一般＆＃34;一般来说＆＃34;只是在寻找paths，然后它也会抓住你创建的甜甜圈路径并修改它们（可能会将它们设置为空字符串或NaN）。

您可以通过将甜甜圈从相同的g地理路径中取出来解决此问题，以便不会选择它们。 或，您可以通过向所有地理路径添加一些类（例如"path"）并在您选择它们​​时使用该类来使您的"geo"选择器更具体（例如{ {1}}）。