D3円弧に表示されないテキスト

Question

http://jsfiddle.net/xu77zz1m/

私はオンラインから抜粋した例があります。私はこれを使ってパスに追加しようとするとテキストが表示されない理由を理解できません。

path.append('text') 
    .attr('transform', function(d) { return "translate(" + arc.centroid(d) + ")"; }) 
    .attr('dy', "0.35em") 
    .attr('style', "color: white; font-size: 50px;") 
    .text(function(d) {return "hellos"; }); 

これは、私が入力している正しいテキストのタグとしてHTMLに表示されますが、ページに何も表示されません。

Whats going on？

Answer 1

SVGパス（または矩形や円などのSVGシェイプ）には、テキストを付加することはできません。各円弧に親の 'g'要素が必要です（pathとtext要素を含めることができます）。

var arcs =svg.selectAll('.'+className) 
       .data(pie(dataset)) 
       .enter() 
       .append('g') 

    var path = arcs.append('path') 
      //etc 

    arcs.append('text') 
      //etc