D3 arc gradient

Question

Tôi đang cố tạo bộ hẹn giờ bằng d3 có độ dốc thay đổi từ 0 đến 100%. Ví dụ: màu cam tối ở 0% và màu cam nhạt là 100%. Tôi có thể làm cho quá trình chuyển đổi vòng cung giữa màu cam tối và sáng nhưng gặp vấn đề khi tìm kiếm bất kỳ thứ gì cho phép tôi áp dụng một gradient cho cung. Một ví dụ về những gì tôi đang cố gắng đạt được có thể được nhìn thấy trong hình dưới đây.

Được tìm kiếm/chiên não của tôi đang cố gắng để đạt được điều này trong một ngày hoặc lâu hơn bây giờ.

Answer 1

SVG không cho phép các loại gradient này. Tôi đã làm một cái gì đó rất giống trước đây, tôi đã tạo ra một "biểu đồ bánh rán", nơi mỗi nêm là một màu sắc khác nhau:

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