d3.js - さまざまな半径の 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); });

ここに完全な例があります。実際の例では、円グラフの各セグメントに対して乱数を作成する代わりに、データ内の半径を指定して参照する必要があります。次に、同じ円グラフのすべてのセグメントに同じ半径を設定することもできます。