Draw слоистой дуги в D3

Question

Я хочу, чтобы создать диаграмму d3.js, которая выглядит как эта дуга: http://jsfiddle.net/g0r9n090/111/

Диаграмма должна содержать несколько слоев, например: http://jsfiddle.net/rq7s1e6j/

Как создать диаграмму , который имеет этот «промежуток», как дуга, но с несколькими слоями, как эта последняя скрипка?

Код для последней диаграммы:

var dataset = { 
    apples: [53245, 28479, 19697, 24037, 40245], 
    oranges: [53245, 28479, 19697, 24037, 40245], 
    lemons: [53245, 28479, 19697, 24037, 40245], 
    pears: [53245, 28479, 19697, 24037, 40245], 
}; 

var width = 600, 
    height = 400, 
    cwidth = 45; 

var color = d3.scale.category20(); 

var pie = d3.layout.pie() 
    .sort(null); 

var arc = d3.svg.arc(); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .attr("stroke-width", "2") 
    .attr("stroke", "#fff") 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g"); 

gs.selectAll("path").data(function (d) { return pie(d); }) 
     .enter().append("path") 
     .attr("fill", function (d, i) { return color(i); }) 
     .attr("d", function (d, i, j) { 
      return arc.innerRadius(cwidth * j).outerRadius(cwidth * (j + 1))(d); 
     }); 

Любая помощь, которую могли бы получить меня где-нибудь ближе к своей цели, ценится! :)

Answer 1

Компоновка пирог также позволяет установить угол начала и конца, так что вы можете сделать следующее, чтобы создать брешь в круговой диаграмме:

var pie = d3.layout.pie() 
    .sort(null) 
    .startAngle(-40 * (Math.PI/180)) 
    .endAngle(270 * (Math.PI/180)); 

Это выглядит следующим образом: http://jsfiddle.net/y1no35mw/1/

вы можете только установить innerRadius собственность на генератор дуги, так чтобы добавить полый центр, что вы можете сделать, это добавить inner_radius смещение всех отдельных дуг, как так:

var inner_radius = 20;  
gs.selectAll("path").data(function (d) { return pie(d); }) 
     .enter().append("path") 
     .attr("fill", function (d, i) { return color(i); }) 
     .attr("d", function (d, i, j) { 
      return arc 
       .innerRadius(cwidth * j + inner_radius) 
       .outerRadius(cwidth * (j + 1) + inner_radius)(d); 
     }); 

Еще раз здесь в действии: http://jsfiddle.net/y1no35mw/2/

Кроме того, если вы хотите, чтобы внутренний радиус, чтобы иметь cwidth вы можете просто умножить на (j+1) и (j+2) и тогда вы не будете нуждаться в inner_radius дополнения.