D3 arc gradient

Question

Я пытаюсь создать таймер, используя d3, который имеет градиент, который будет меняться от 0 до 100%. Например, темно-оранжевый при 0% и светло-оранжевый со 100%. Я могу сделать переход дуги между темным и светло-оранжевым, но проблемы с поиском чего-либо, что позволяет применить градиент к дуге. Пример того, что я пытаюсь достичь, можно увидеть на изображении ниже.

разыскивал/жарки мой мозг пытается добиться этого в течение дня или так теперь.

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