Javascript SVG向圆环图添加径向渐变
我正在用d3.js绘制图表。Javascript SVG向圆环图添加径向渐变,javascript,svg,d3.js,gradient,donut-chart,Javascript,Svg,D3.js,Gradient,Donut Chart,我正在用d3.js绘制图表。 是否可以将径向渐变添加到甜甜圈图表中,如何处理此图片?假设圆弧部分是填充的路径元素,您可以使用径向渐变来获得该结果 请看,我们可以重用该示例以得出: var dataset = { apples: [53245, 28479, 19697, 24037, 40245], }; var width = 460, height = 300, radius = Math.min(width, height) / 2; var color = d3.
是否可以将径向渐变添加到甜甜圈图表中,如何处理此图片?假设圆弧部分是填充的路径元素,您可以使用径向渐变来获得该结果 请看,我们可以重用该示例以得出:
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:可能会对您有所帮助。很好的解决方案,我昨天在clean svg上也做了一些相同的工作