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

Question

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

可能问题出在这里：

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

调整小部件的大小class

width:500px

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

d3, pie chart, labels outside not working properly

labels

d3.js

pie-chart