d3、円グラフ、ラベルが正常に動作していない

Question

ラベルが左側に表示されないため、円グラフに問題があります。誰もが問題を知っていますか？

http://codepen.io/user1010/pen/BQPvLL

たぶん、問題はここにある：

var text=svg.selectAll('.legend') 
     .data(pie(dataset)) 
     .enter() 
     .append("text") 
     .attr('class','legend') 

.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; }) 
     .attr("dy", "20px") 

Answer 1

あなたは次のように変更（元のコードに適用される：http://codepen.io/anon/pen/mOjaYW）を試みることができる

はlabelArc

の半径を大きくします

var labelArc = d3.svg.arc() 
    .outerRadius(radius + 30) 
    .innerRadius(radius + 30); 

は、ウィジェットクラスのサイズを調整する中央

.attr("text-anchor", "middle") 

にラベルを合わせ右

transform: 'translate(' + w/1.5 +',' + h/2 + ')' 

をよりメインチャートSVGを移動

width:500px