d3、饼图、外部标签无法正常工作

d3, pie chart, labels outside not working properly

我的饼图有问题,因为标签没有显示在左侧。有人知道这个问题吗?

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

您可以尝试以下更改(应用于您的原始代码: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")

调整小部件的大小class

width:500px