不同半径的 d3 甜甜圈图

Question

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

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

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

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

Answer 1

为此，您需要为每个附加的饼图动态调整.innerRadius() and/or .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。在一个真实的例子中，您想要在数据中指定半径并引用它，而不是为饼图的每个部分组成一个随机数。然后你也可以让同一个饼图中的所有线段具有相同的半径。

不同半径的 d3 甜甜圈图

d3 donut charts of varying radius

d3.js

donut-chart