D3弧度梯度

问题描述

我尝试使用d3创建一个计时器，该计时器的梯度会在0和100％之间变化。例如，暗橙色为0％，浅橙色为100％。我可以使电弧在黑暗和浅橙色之间转换，但是找到任何可以让我对电弧应用梯度的问题。

I'm trying to create a timer using d3 which has a gradient which will change between 0 and 100%. For example dark orange at 0% and light orange at 100%. I can make the arc transition between dark and light orange but having problems finding anything which allows me to apply a gradient to the arc. An example of what I am trying to achieve can be seen in the image below.

正在搜索/煎炸我的大脑，试图实现一天左右的时间。

Been searching/frying my brain trying to achieve this for a day or so now.

推荐答案

SVG不允许这种类型的渐变。我做了一些非常相似的事情，我创建了一个甜甜圈图表，其中每个楔形是不同的颜色：

SVG does not allow for these kind of gradients. I've done something very similar before, I created a "donut chart" where each wedge is a different color:

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

这篇关于D3弧度梯度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！