javascript - D3.js：创建一个饼图，其中每个切片具有不同的径向渐变半径

Question

我回来尝试构建另一个 D3.js 图表，这一次是一种具有 3 个切片的饼图。这很简单，但这张图表必须在每一块上都有径向渐变。再说一次，也许不是太难。困难的部分是每个“片”都有不同的半径。这是它的基本要点：

我在Codepen上创建了一个原型。这是渐变部分：

var radialGradient = svg.append("defs")
  .append("radialGradient")
    .attr("id", "radial-gradient");

radialGradient.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "#fff");

radialGradient.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", "red");

如果你可以在半径较小的两侧添加另一个渐变，我想我可以从那里拿走它。

编辑： 这个问题与我自己的问题相去不远。只是不知道如何将它应用到我的馅饼上。

编辑 2： 这是我的第二个原型。如果我自己这么说还不错。有什么想法吗？

标签： javascriptd3.jschartsradial-gradients