Javascript D3弧梯度

我试图用d3创建一个计时器，它有一个梯度，在0和100%之间变化。例如，0%时为深橙色，100%时为浅橙色。我可以在暗橙色和浅橙色之间进行圆弧过渡，但在找到任何允许我对圆弧应用渐变的东西时遇到问题。我正在努力实现的一个例子可以在下图中看到

---

大约一天来，我一直在搜索/煎熬我的大脑，试图实现这一目标。

SVG不允许这种梯度。我以前也做过类似的事情，我创建了一个“甜甜圈图表”，其中每个楔形都是不同的颜色：

---

这里有很多关于如何在SVG和D3中使用渐变的问题，例如。这些都对你没有帮助吗？另外，除了@Larskothoff说的，你应该发布一个你试图成功的例子，这样每个人都可以从那里开始。这看起来不错+1

var arc, data, padding, steps = 2, r=400/2, pi = Math.PI;
var padding = 2 * r / 200;
arc = d3.svg.arc()
  .innerRadius(r-40)
  .outerRadius(r).startAngle(function(d) { return d.startAngle; })
  .endAngle(function(d) { return d.endAngle; });

data = d3.range(180).map(function(d, i) {
  i *= steps;
  return {
    startAngle: i * (pi / 180),
    endAngle: (i + 2) * (pi / 180),
    fill: d3.hsl(i, 1, .5).toString()
  };
});

d3.select("#wheel")
  .insert('svg', 'svg')
  .attr("id", "icon")
  .append('g')
    .attr("transform", "translate(" + r + "," + r + ") rotate(90) scale(-1,1)")
    .selectAll('path')
      .data(data)
      .enter()
      .append('path').attr("d", arc)
      .attr("stroke-width", 1)
      .attr("stroke", function(d) { return d.fill;})
      .attr("fill", function(d) { return d.fill; });