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. В реальном примере вам нужно указать радиус в данных и ссылке, вместо того чтобы составлять случайное число для каждого сегмента круговой диаграммы. Тогда вы также можете иметь одинаковый радиус для всех сегментов в одной и той же круговой диаграмме.