D3.js: Pie graph, adding a border only to the outter region

Question

I got a pie graph in D3 with a stroke to separete every slice. However, I'd like to add a border only to the outter region of the slices, not in a continuos line but rather respecting the gaps created by the strokes in the original slices. See my image for clarifiation. Any thoughts on how to do that? See 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); ```

Accepted Answer

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

```
arcs.append("path")
.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
phantomArcs.append("path")
  .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 http://jsfiddle.net/odiseo/4xk58/4/

D3.js: Pie graph, adding a border only to the outter region

Solution

Problem

Related problems