使用.padAngle（）在d3js中分组饼图段

Question

如何使用d3在甜甜圈/饼图中的某些片段组之间添加填充？

更新

我正在使用d3.svg.arc形状生成器和.padAngle（paddingFunction），其中paddingFunction定义为：

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

此图像使用上述paddingFunction。

但是如果我将填充功能更改为：

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

我得到这张图片：

代码不应该返回两组中间有间隙的段吗？

完整代码：

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

更新2

似乎我误解了.padAngle（）方法是如何工作的。它在一个段的两侧添加填充，我认为它增加了段之间的间隙。

在d3中是否有另一种方法可以增加分段之间的间隙（同时重新计算分段的面积以便它们保持比例）？

正在运行代码：http://blockbuilder.org/GitNoise/13f38aa8f4f2f06dd869