D3 饼图从地图上消失

Question

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

我想放置一个自定义饼图，如下图所示。我在圈子创建完成后添加了代码 sn-p 来创建一个。

饼图片段：

        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" 属性。因为它“一般”只是在寻找pathss，所以它也会抓取您创建的甜甜圈路径并修改它们（可能将它们设置为空字符串或NaNs）。

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