добавление текста в круговой диаграмме d3.js многоуровневой

Question

Я хочу иметь многоуровневый круговую диаграмму, например, как здесь:

Единственное, я не получаю, чтобы работать, как добавить текст на круговой диаграмме. Я хочу, чтобы на каждом сегменте была метка. Теперь я знаю, как это сделать для одноуровневой круговой диаграммы, но я не преуспеваю в этом многоуровневом. Если бы кто-то мог, например, показать один пример на jsfiddle, который был бы очень признателен!

http://jsfiddle.net/Qh9X5/304/

CSS 

body { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    margin: auto; 
    position: relative; 
    width: 960px; 
} 

text { 
    font: 10px sans-serif; 
} 

form { 
    position: absolute; 
    right: 10px; 
    top: 10px; 
} 

Javascript 

var dataset = { 
    apples: [33.3, 33.3, 33.4], 
    oranges: [12.5, 12.5, 12.5, 12.5, 12.5, 12.5, 12.5, 12.5], 
    lemons: [20, 20, 20, 20, 20], 
}; 

var width = 660, 
    height = 500, 
    cwidth = 75; 

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) 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g"); 
var path = 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(10+cwidth*j).outerRadius(cwidth*(j+1))(d); }); 

Answer 1

d3.svg.arc.centroid удобный способ, чтобы получить точку в центре дуги, которая является OK отправной точкой для меток.

Вот еще один аналогичный вопрос, который показывает некоторое дополнительное позиционирование. Label outside arc (Pie chart) d3.js