d3, pie chart, labels outside not working properly

0
votes

I have a problem with my pie chart, as the labels are not showing on the left side. Does anyone know the issue?

http://codepen.io/user1010/pen/BQPvLL

Maybe the problem is in here:

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")
1
d3.jspie-chartlabels

1 Answers

1
votes

You could try the following changes (applied to your original code: http://codepen.io/anon/pen/mOjaYW)

Increase the radius of labelArc

var labelArc = d3.svg.arc()
    .outerRadius(radius + 30)
    .innerRadius(radius + 30);

Move the main chart svg more to the right

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

Align the label in the middle

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

Adjust the size of the widget class

width:500px