d3.js - 不同半径的 d3 圆环图

Question

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

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

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

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

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 .在一个实际示例中，您希望在数据中指定半径并引用该半径，而不是为饼图的每个部分组成一个随机数。然后，您还可以为同一饼图中的所有线段设置相同的半径。