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

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

更新

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

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

此图像正在使用上述填充功能

但如果我将padding函数更改为：

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中是否有替代方法在分段之间增加间隙（同时重新计算分段面积，使其保持比例）

---

运行代码：

请使用。谢谢。我用更多的信息更新了我比较模糊的问题。而且

.padAngle（）

对你不起作用？出于某种原因，当在.padAngle（）中使用函数时，它不起作用。嗯，看起来应该是这样的。您是否在一种情况下尝试过返回非零值？