Gradient łuku D3

Question

Próbuję utworzyć zegar za pomocą d3, który ma gradient, który zmieni się między 0 a 100%. Na przykład ciemnopomarańczowy przy 0% i jasno-pomarańczowy przy 100%. Mogę dokonać przejścia łuku między ciemnymi i jasnopomarańczowymi, ale mając problemy ze znalezieniem czegokolwiek, co pozwala mi zastosować gradient do łuku. Przykład tego, co próbuję osiągnąć, można zobaczyć na poniższym obrazku.

szukał/smażenia mój mózg stara się osiągnąć ten cel na dzień lub tak teraz.

Answer 1

SVG nie pozwala na tego rodzaju gradienty. Zrobiłem coś bardzo podobnego wcześniej, stworzył „wykres pączka”, gdzie każdy klin ma inny kolor:

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