Ярлыки, не отображающиеся на диаграмме d3 sunburst

Question

Я пытаюсь сделать ярлыки на диаграмме солнечных лучей, используя D3. Я попытался добавить метки для каждого фрагмента, но это не сработает. Что я делаю не так? Я искал несколько подобных проблем, но я не могу его засунуть. Спасибо за ваше время.

Вот скрипка: https://jsfiddle.net/4mx4jsdw/

И вот код, я использую, чтобы запихнуть в тексте, временно я устанавливаю вращение до 30 градусов:

var path = vis.data([json]).selectAll("path") 
    .data(nodes) 
    .enter() 
    .append("svg:path") 
    .attr("display", function(d) { return d.depth ? null : "none"; }) 
    .attr("d", arc) 
    .attr("fill-rule", "evenodd") 
    .style("fill", function(d) { return colors(d.name); }) 
    .style("opacity", 1) 
    .on("mouseover", mouseover) 
    .append("text") 
    .text(function(d) { console.log("Q", d.name); return d.name}) 
    .attr("x", function(d) { return d.x; }) 
    .attr("text-anchor", "middle") 
    // translate to the desired point and set the rotation 
    .attr("transform", function(d) { 
    if (d.depth > 0) { 
     return "translate(" + arc.centroid(d) + ")" + 
     "rotate(" + 30 + ")"; 
    } 
    else { 
     return null; 
    } 
    }) 

Answer 1

Так что я дочитал некоторые d3 и поняли, что если мы используем элементы окружности, нам нужно связать svg и текст отдельно с тегом «g». Так что я просто нужно добавить еще одну строку кода:

.append("g") 

в этот блок:

var path = vis.data([json]).selectAll("path") 
    .data(nodes) 
    .enter() 
    .append("svg:path") 

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

var path = vis.data([json]).selectAll("path") 
    .data(nodes) 
    .enter() 
    .append("g") 
    path.append("svg:path") 

Вот working fiddle. Я все еще пытаюсь повернуть текст для совершенства, но эй, это работает!