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); 

Перемещение основной диаграммы SVG еще правее

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

Совместите метку в середине

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

Отрегулируйте размер класса виджета

width:500px