d3、饼图、标签外面不能正常工作

【问题标题】：d3, pie chart, labels outside not working properlyd3、饼图、标签外面不能正常工作
【发布时间】：2016-12-10 22:11:05
【问题描述】：

我的饼图有问题，因为左侧没有显示标签。有谁知道这个问题？

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

【问题讨论】：

标签： d3.js pie-chart labels

【解决方案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

【讨论】：