Étiquettes ne s'affichent pas sur le diagramme sunburst d3

Question

J'essaie de faire afficher les étiquettes sur une carte sunburst en utilisant D3. J'ai essayé d'ajouter des étiquettes pour chaque tranche, mais cela ne fonctionne pas. Qu'est-ce que je fais mal? J'ai regardé plusieurs problèmes similaires mais je ne suis pas capable de l'identifier. Merci pour votre temps.

est ici le violon: https://jsfiddle.net/4mx4jsdw/

Et voici le code que je utilise pour pousser dans le texte, temporairement je réglage de la rotation 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

Alors j'ai lu quelques-uns D3 documentation et réalisé que si nous utilisons des éléments de cercle, nous devons lier le svg et le texte séparément avec la balise "g". Donc, je dois juste ajouter une ligne de code:

.append("g") 

dans ce bloc:

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

Ainsi, le bloc final ressemble à ceci:

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

Voici le working fiddle. J'essaye toujours de faire pivoter le texte pour la perfection, mais bon, ça marche!