D3弧形渐变[关闭]答案

【问题标题】：D3 arc gradient [closed]D3弧形渐变[关闭]
【发布时间】：2013-08-12 23:23:05
【问题描述】：

我正在尝试使用 d3 创建一个计时器，它的渐变将在 0 到 100% 之间变化。例如，0% 为深橙色，100% 为浅橙色。我可以在深橙色和浅橙色之间进行弧形过渡，但是在找到任何可以让我对弧形应用渐变的东西时遇到问题。下图中可以看到我正在尝试实现的示例。

现在一天左右一直在寻找/煎熬我的大脑试图实现这一目标。

【问题讨论】：

这里有很多关于如何在 SVG 和 D3 中使用渐变的问题，例如this one。这些都不对你有帮助吗？
另外，除了@LarsKotthoff 所说的之外，您应该发布一个您尝试完成的示例，以便每个人都可以从那里开始。

标签： javascript svg d3.js gradient

【解决方案1】：

SVG 不允许这种渐变。我之前做过非常相似的事情，我创建了一个“甜甜圈图”，其中每个楔子都是不同的颜色：

http://jsfiddle.net/duopixel/GfVrK/

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

【讨论】：

这看起来不错... +1'd