Accepted answer

I solved this by adding two extra arch sets, making up to three. The first one is the normal pie, WITHOUT strokes

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

The second one will be the border I wanted to add in first place. It's just a set of arches surrounding our original one but in a different color. Not strokes yet.

And finally, the third archset will be the one that actually draws the strokes I wanted

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

This makes up for the effect, see

Desired visual effect


You can simulate this by adding another set of arcs that acts as the border.

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

// etc

  .attr("fill", "black")
  .attr("d", arcBorder);

Complete jsfiddle here.

Related Query

More Query from same tag