D3 gradiente d'arco

Question

Sto provando a creare un timer usando d3 che ha un gradiente che cambierà tra 0 e 100%. Ad esempio, arancio scuro allo 0% e arancione chiaro al 100%. Riesco a fare la transizione dell'arco tra il buio e l'arancione chiaro, ma avendo problemi a trovare qualcosa che mi permetta di applicare un gradiente all'arco. Un esempio di ciò che sto cercando di ottenere può essere visto nell'immagine qui sotto.

cercato/friggere il mio cervello cercando di raggiungere questo obiettivo per un giorno o così ora.

Answer 1

SVG non consente questo tipo di gradienti. Ho fatto qualcosa di molto simile prima, ho creato un "grafico ad anello" dove ogni fetta corrisponde a un colore diverso:

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