D3 弧形渐变

Question

我正在尝试使用d3创建一个计时器，其中包含一个在0%和100%之间变化的渐变。例如，在0％时为深橙色，在100％时为浅橙色。我可以使弧形在深橙色和浅橙色之间转换，但是找不到任何允许我将渐变应用于弧形的方法。下面的图像显示了我想要实现的内容。

图片链接：https://istack.dev59.com/ZyUTN.webp 我已经搜索并努力尝试了一天左右，但仍无法实现。

- Tom Coates

---

这里有很多关于如何在SVG和D3中使用渐变的问题，例如这个。难道这些都没有帮助到你吗？ - Lars Kotthoff

此外，除了@LarsKotthoff所说的，您应该发布一个您尝试实现此操作的示例，以便每个人都可以从那里开始。 - Joum

Answer 1

SVG不允许使用这种渐变效果。我之前做过类似的事情，创建了一个“甜甜圈图表”，每个楔形块都是不同的颜色：

var arc, data, padding, steps = 2, r=400/2, pi = Math.PI;
    var padding = 2 * r / 200;
    arc = d3.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("body")
      .insert('svg')
      .attr("width", r*2+padding)
      .attr("height", r*2+padding)
      .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; });

svg {
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

- methodofaction