SVG爲圓環圖添加徑向漸變

Question

我正在用d3.js繪製圖表。
是否可以添加徑向漸變圓環圖，如何在這張圖片？

Answer 1

假設圓弧部分是填充的路徑元素，您可以使用徑向漸變來獲得該結果。

參見this similar question，我們可以重新使用例如在到達：

var dataset = { 
    apples: [53245, 28479, 19697, 24037, 40245], 
}; 

var width = 460, 
    height = 300, 
    radius = Math.min(width, height)/2; 

var color = d3.scale.category20(); 

var pie = d3.layout.pie() 
    .sort(null); 

var arc = d3.svg.arc() 
    .innerRadius(radius - 100) 
    .outerRadius(radius - 50); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

var grads = svg.append("defs").selectAll("radialGradient").data(pie(dataset.apples)) 
    .enter().append("radialGradient") 
    .attr("gradientUnits", "userSpaceOnUse") 
    .attr("cx", 0) 
    .attr("cy", 0) 
    .attr("r", "100%") 
    .attr("id", function(d, i) { return "grad" + i; }); 
grads.append("stop").attr("offset", "15%").style("stop-color", function(d, i) { return color(i); }); 
grads.append("stop").attr("offset", "20%").style("stop-color", "white"); 
grads.append("stop").attr("offset", "27%").style("stop-color", function(d, i) { return color(i); }); 

var path = svg.selectAll("path") 
    .data(pie(dataset.apples)) 
    .enter().append("path") 
    .attr("fill", function(d, i) { return "url(#grad" + i + ")"; }) 
    .attr("d", arc); 

的jsfiddle：http://jsfiddle.net/X8hfm/