d3, Kreisdiagramm, Etiketten außerhalb funktioniert nicht richtig

Question

Ich habe ein Problem mit meinem Tortendiagramm, da die Etiketten nicht auf der linken Seite angezeigt werden. Kennt jemand das Problem?

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

Vielleicht ist das Problem hier ist:

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

Sie könnten die folgenden Änderungen versuchen (zu Ihrem ursprünglichen Code angewendet: http://codepen.io/anon/pen/mOjaYW)

Erhöhen Sie den Radius von labelArc

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

das Hauptdiagramm svg bewegen mehr nach rechts

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

das Etikett ausrichten in der Mitte

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

die Größe des Klasse-Widget anpassen

width:500px