如何获得径向梯度从饼图的中心开始

how to get the radial gradient to start from the centre of the pie chart?

本文关键字：开始 何获得      更新时间：2023-09-26

在我的网格线饼图中，我集成了一个径向梯度。问题是，如果每个饼都有一个梯度。我想要一个渐变，这是常见的，它起源于饼图的中心。

我试着:

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

但它没有帮助。

如何获得径向梯度从饼图的中心开始?

jsFiddle

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

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

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

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

相关文章：