d3.js - Grouped pie chart segments in d3js using .padAngle() -

how add padding between groups of segments in donut/pie chart using d3?

update

i using d3.svg.arc shape generator , .padangle(paddingfunction) paddingfunction defined as:

var paddingfunction = function(d,i) { return i%1==0 ? 0.1 : 0 }; 

this image using paddingfunction described above.

but if change padding function this:

var paddingfunction = function(d,i) { return i%5==0 ? 0.1 : 0 }; 

i image:

shouldn't code return 2 groups of segments gap in-between?

complete code:

 // magic numbers var t = 2 * math.pi; var archeight = 100; var innerradius = 50; var hours = 10;   function postion(i,offset) {   offset = offset || 0;   return i*(t / hours) + offset*(t / hours) }  var paddingfunction = function(d,i) { return i%1==0 ? 0.1 : 0 };  // arc generators var arc = d3.svg.arc()   .innerradius(function(d,i) { return innerradius; })   .outerradius(function(d,i) { return innerradius + archeight; })   .startangle(function(d, i){ return postion(d.hour);})   .endangle(function(d, i){ return postion(d.hour,1);})     .padangle(paddingfunction);   // data var data = d3.range(0,hours); data = data.map(function(d) {   return {     hour: d,     color: math.random(),   } });  // scales var colorscale = d3.scale.linear() .domain([0, 1]) .interpolate(d3.interpolatergb) .range(["#ffffff", "#ffba19"]);  // render viz var svg = d3.select("svg") .append("g") .attr("transform", "translate(320, 320)");  var select = svg.selectall(".fore").data(data).enter(); select.append("path")   .classed("fore", true)   .style({     "stroke": "black",     "stroke-width": 1,     "fill": function(d) { return colorscale(d.color); }     })   .attr("d", arc); 

update 2

seems misunderstood how .padangle() method works. adds padding on both sides of segment, thought added gap between segments.

is there alternative method in d3 adds gap between segements (whilst recalculating area of segments keep proportions)?

running code: http://blockbuilder.org/gitnoise/13f38aa8f4f2f06dd869