如何从饼图中心开始径向渐变？

Question

在my pie chart with grid lines中，我整合了一个径向渐变。问题是每个馅饼都有一个渐变。我实际上想要一个常见的渐变，它起源于饼图的中心。

我试过了：

var arc = d3.svg.arc()
.attr('fill', 'url(#gradient)')
.outerRadius(function(d) { return 50 + (radius - 50) * d.data.percent / 100; })
.innerRadius(20);

但它没有帮助。

如何从饼图中心开始径向渐变？

jsFiddle

Answer 1

在你的JSFiddle中，你使用了错误的属性。 RadialGradient没有x1，x2等。它有cx，cy等等。

在<radialGradient>标记上，添加名为gradientUnits的属性，并将其值设置为"userSpaceOnUse"。

这意味着整个SVG将考虑渐变属性百分比（cx，cy等），而不仅仅考虑特定形状。然后根据需要调整值。

以下是工作解决方案：http://jsfiddle.net/kqfnuavq/