d3 不同半径的圆环图

Question

我想重新创建类似于以下示例的内容：

http://bl.ocks.org/mbostock/3888852

http://bl.ocks.org/mbostock/1305111

唯一的区别是我想控制每个甜甜圈的半径，而不是让所有甜甜圈都一样。如何动态改变圆环图的半径？

Answer 1

为此，您需要为每个附加的饼图动态调整.innerRadius() 和/或.outerRadius()，例如

svg.selectAll(".arc")
  .data(function(d) { return pie(d.ages); })
.enter().append("path")
  .attr("class", "arc")
  .attr("d", function(d, i) { return arc.innerRadius(radius - 30 * Math.random())(d, i); })
  .style("fill", function(d) { return color(d.data.name); });

完整示例here。在一个真实的例子中，您希望在数据中指定半径并引用它，而不是为饼图的每个部分组成一个随机数。那么你也可以对同一个饼图中的所有线段设置相同的半径。