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。在一个实际示例中，您需要在数据和引用中指定半径，而不是为饼图的每个段构成一个随机数。然后，您也可以在同一个饼图中为所有段创建相同的半径。