d3.js - 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); });

完整的例子在这里。在一个真实的例子中，您希望在数据中指定半径并引用它，而不是为饼图的每个部分组成一个随机数。然后，您还可以为同一个饼图中的所有段设置相同的半径。