svg - D3.js:饼图，仅向外部区域添加边框

Question

我在 D3 中得到了一个饼图，并用笔画分隔了每个切片。但是，我想仅向切片的外部区域添加边框，而不是在连续线上添加边框，而是尊重原始切片中的笔划创建的间隙。请参阅我的图片以进行澄清。关于如何做到这一点有什么想法吗？

参见http://jsfiddle.net/4xk58/

arcs.append("path")
.attr("fill", function (d, i) {
return color(i);
})
.attr("d", arc).style('stroke', 'white')
.style('stroke-width', 5);

Answer 1

我通过添加两个额外的拱形组来解决这个问题，总共三个。 第一个是普通的馅饼，没有笔划

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

这弥补了效果，参见 http://jsfiddle.net/odiseo/4xk58/4/