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
我的饼图有问题,因为标签没有显示在左侧。有人知道这个问题吗?
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