D3 spacing between arcs

Question

I am pretty new to D3 chart and I created my first donut chart using D3, but I was wondering if there is anyway I can put some padding/spacing between each arc.

I know I could reduce each arc's start and end angles, for example,

arc 1: from 90degree to 120degree arc 2: from 120degree to 150degree

reduce the angles above like arc 1: from 92degree to 118degree arc 2: from 122 degree to 148degree and so on..

but I am curious if there is any easier way to put some spacing.

Here's my code and you can see the full code in JSfiddle.

var vis = d3.select(elementSelector);
var arc = d3.svg.arc()
.innerRadius(svgInnerRadius)
.outerRadius(svgOuterRadius)
.startAngle(function(d){return anglePercentage(d[0]);})
.endAngle(function(d){return anglePercentage(d[1]);});
...

http://jsfiddle.net/24FaQ/

Thank you so much in advance.

Answer 1

This is actually what you're looking for:

http://bl.ocks.org/mbostock/f098d146315be4d1db52

var pie = d3.layout.pie()
    .padAngle(.02);

Answer 2

If you're drawing on top of a solid background (white or otherwise), you can add stroke to achieve this effect without modifying the angles.

Here's a modified fiddle.

vis.selectAll("path")
    .data(data)
    .enter()
    .append("path")
    .attr("d", arc)
    .style("fill", function(d){return color(d[2]);})
    .attr('stroke', '#fff') // <-- THIS
    .attr('stroke-width', '6') // <-- THIS
    .attr("transform", "translate(" + svgWidth / 2 + ", " + svgHeight / 2 + ")");

This applies the stroke to all the edges, including the curved ones. If you need to avoid that, the you have to instead draw and position lines with white strokes at the start/end of each slice.