SVG向圆环图添加放射渐变 [英] SVG Adding radial gradient to donut chart

问题描述

我使用d3.js绘制图表。

是否可以为圆环图添加径向渐变，如何在此图片上？

I'm drawing charts with d3.js.
Is it possible to add radial gradients to donut chart, how on this picture?

推荐答案

假设弧段是路径元素

请参阅这个类似的问题，我们可以重用这个例子到达：

See this similar question, we can reuse the example to arrive at:

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/

Jsfiddle: http://jsfiddle.net/X8hfm/

这篇关于SVG向圆环图添加放射渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！