D3 Bogen Gradient

Question

Ich versuche, einen Timer mit d3, die einen Gradienten hat, die zwischen 0 und 100% ändern wird erstellen. Zum Beispiel dunkelorange bei 0% und hellorange bei 100%. Ich kann den Lichtbogen zwischen dunkel und hellorange wechseln lassen, habe aber Probleme, etwas zu finden, was es mir erlaubt, einen Gradienten auf den Lichtbogen anzuwenden. Ein Beispiel für das, was ich versuche zu erreichen, ist im Bild unten zu sehen.

gesucht/Braten mein Gehirn versucht, dies einen Tag oder so jetzt zu erreichen.

Answer 1

SVG erlaubt diese Art von Gradienten nicht. Ich habe schon etwas sehr ähnliches getan, ich habe einen „Donut-Plan“ erstellt, in dem jeder Keil eine andere Farbe ist:

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