13

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

I want an outter border like this

odiseo
  • 6,754
  • 2
  • 20
  • 21

2 Answers2

18

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/

Desired visual effect

odiseo
  • 6,754
  • 2
  • 20
  • 21
2

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

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

// etc

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

Complete jsfiddle here.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • But I need to preserve the gaps between the slices. I.e., I don't want the border to be continus, but interrupted where the arcs strokes should be – odiseo Nov 27 '13 at 21:37
  • You can't really have partial borders in SVG (although [this question](http://stackoverflow.com/questions/17908988/partial-border-stroke-using-svg) may help), so you could try getting to that by adding a stroke to the "border" arc. Then you'll have a gap between that and the actual arcs though. – Lars Kotthoff Nov 27 '13 at 21:43