Добавление меток к d3 sunburst

Question

Я пытаюсь изменить пример D3 sunburst здесь (http://bl.ocks.org/mbostock/4063423), чтобы добавить метки к дугам.

Я добавил код, чтобы вычислить угол и сгенерировать текст (взятый из этого примера: http://jsfiddle.net/4PS53/6/), но он не работает. Текст просто не отображается, и когда я пытаюсь проверить элементы < > с помощью инспектора, они, похоже, не находятся в DOM.

Любая помощь очень ценится! Код JS ниже (изменен из оригинального примера галереи D3), данные JSON совпадают. Я показываю части кода, которые я модифицировал; остальное то же самое.

d3.json("data.json", function(error, root) { 
    console.log(root); 
    var path = svg.datum(root).selectAll("path") 
     .data(partition.nodes) 
     .enter().append("path") 
     .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring 
     .attr("d", arc) 
     .style("stroke", "#fff") 
     .style("fill", function(d) { return color((d.children ? d : d.parent).name); }) 
     .style("fill-rule", "evenodd") 
     .each(stash); 

    path.append("text") 
     .text(function(d) { return d.name}) 
     .classed("label", true) 
     .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(" + getAngle(d) + ")"; 
      } else { 
       return null; 
      } 
     }) 
     .attr("dx", "6") // margin 
     .attr("dy", ".35em") // vertical-align 
     .attr("pointer-events", "none"); 

}); 

function getAngle(d) { 
    // Offset the angle by 90 deg since the '0' degree axis for arc is Y axis, while 
    // for text it is the X axis. 
    var thetaDeg = (180/Math.PI * (arc.startAngle()(d) + arc.endAngle()(d))/2 - 90); 
    // If we are rotating the text by more than 90 deg, then "flip" it. 
    // This is why "text-anchor", "middle" is important, otherwise, this "flip" would 
    // a little harder. 
    return (thetaDeg > 90) ? thetaDeg - 180 : thetaDeg; 
} 

Answer 1

Вы должны g группы элементов, чтобы добавить текст, так что вы можете просто изменить:

var path = svg.datum(root).selectAll("path") 
    .data(partition.nodes) 
    .enter().append("path") 
    .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring 
    .attr("d", arc) 
    .style("stroke", "#fff") 
    .style("fill", function(d) { return color((d.children ? d : d.parent).name); }) 
    .style("fill-rule", "evenodd") 
    .each(stash); 

в

var path = svg.datum(root).selectAll("path") 
    .data(partition.nodes) 
    .enter().append("g") 

path.append("path") 
    .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring 
    .attr("d", arc) 
    .style("stroke", "#fff") 
    .style("fill", function(d) { return color((d.children ? d : d.parent).name); }) 
    .style("fill-rule", "evenodd") 
    .each(stash); 

Проверить эту jsFiddle: http://jsfiddle.net/5d0zd2s7/