Svg D3.js：饼图，仅向外部区域添加边框

我在D3中得到了一个饼图，用一个笔划来分隔每个切片。但是，我只想在切片的外部区域添加边界，而不是在连续线中，而是根据原始切片中笔划创建的间隙。请参阅我的图片以获得澄清。你有什么想法吗

看

---

您可以通过添加另一组用作边界的圆弧来模拟这一点

var arcBorder = d3.svg.arc()
  .innerRadius(outerRadius)
  .outerRadius(outerRadius + border);

// etc

arcs.append("path")
  .attr("fill", "black")
  .attr("d", arcBorder);

---

完整的JSFIDLE。

我通过添加两个额外的拱形集合（最多三个）解决了这个问题。 第一个是普通派，没有笔划

arcs.append("path")
.attr("fill", function (d, i) {
   return color(i);
}).attr("d", arc);

第二个是我想首先添加的边界。它只是围绕着我们原来的一个拱门的一组拱门，但颜色不同。还没有

最后，第三个拱门集将实际绘制我想要的笔划

//Draw phantom arc paths
phantomArcs.append("path")
  .attr("fill", 'white')
  .attr("fill-opacity", 0.1)
  .attr("d", arcPhantom).style('stroke', 'white')
  .style('stroke-width', 5);

这可以弥补此效果，请参见

---

但我需要保留切片之间的间隙。也就是说，我不希望边界是连续的，但是在弧笔划应该超出的地方中断。您在SVG中不能真正拥有部分边界（尽管可能会有帮助），因此您可以尝试通过向“边界”弧添加笔划来实现这一点。然后你会在这和实际的弧之间有一个差距。

//Draw phantom arc paths
phantomArcs.append("path")
  .attr("fill", 'white')
  .attr("fill-opacity", 0.1)
  .attr("d", arcPhantom).style('stroke', 'white')
  .style('stroke-width', 5);