d3js Redistributing labels around a pie chart

Question

I'm using d3.js to create a donut chart with labels on the outside. Using some trigonometry based on the centroids of each slice of the pie, I position the labels.

g.append("g")
        .attr("class", "percentage")
        .append("text")
            .attr("transform", function(d)
                { 
                    var c = arc.centroid(d);
                    var x = c[0];
                    var y = c[1];
                    var h = Math.sqrt(x*x + y*y);
                    return "translate(" + (x/h * obj.labelRadius) +  ',' + (y/h * obj.labelRadius) +  ")"; 
                }
            ) 
            .attr("dy", ".4em")
            .attr("text-anchor", function(d) 
                {
                    return (d.endAngle + d.startAngle)/2 > Math.PI ? "end" : "start";
                }
            )
            .text(function(d) { return d.data.percentage+"%"; });

What I'm ultimately trying to accomplish is to rearrange labels that are outside the edges of the pie chart, to prevent overlaps.

enter image description here

One of the ways I have tried to solve the problem is to define set "anchor points", where labels can be positioned, guaranteeing that they will no overlap. Problem is mapping the centroids to the anchors and preserving some sense of visual correspondence between the slices and the labels (Specially difficult when slices are slim).

enter image description here

Image above shows the possible location of the anchors (centroids of the slices shown). With these positions it is impossible to have an overlap.

Adding complexity to the problem is the fact that when labels (they're horizontal) are close to the top or bottom of the pie, they are more easily overlapped, than when they are on the right or left of the pie.

Any ideas on how to approach this problem?

[EDIT] Following the suggestion of meetamit, I implemented the following:

.attr("dy", function(d)
{
    var c = arc.centroid(d);
        var x = c[0];
        var y = c[1];
        var h = Math.sqrt(x*x + y*y);
        var dy = y/h * obj.labelRadius; 
    dy=dy*fontSizeParam*.14/heightParam);
    return (dy)+"em";
})

It helps a bit, and gives some room to the labels, still looking for a solution that will cover all cases though...

Could you put up an example of what you have so far on jsfiddle? — Jonah
I added an image for clarity. I haven't implemented in code the "anchor" solution, as I've worked out on paper various cases where it can fail. — Cenobyte321
I see. Indeed, you have a difficult problem, and one that really has little to do with d3 per se: you are seeking a general algorithm for the placement of labels on your graph. Can you make any assumptions? Eg, if all the pieces were as little as the green and yellow ones, there would simply be no good way to fit all the labels in? What about showing the label only on hover for pieces that are below a certain size? — Jonah
Thanks Jonah. Hover is ruled out as they are touch devices and won't support interactivity. Some possible assumptions: No more than 12 slices allowed, so there is always a possible arrangement of the labels without overlap. Mapping the positions and keeping visual coherence is the problem here. — Cenobyte321

Kim T Kim T · Accepted Answer · 2013-10-23T21:12:41

Can't you create two arcs? one for the chart, and one for the labels?

// first arc used for drawing the pie chart
var arc = d3.svg.arc()
  .outerRadius(radius - 10)
  .innerRadius(0);

// label attached to first arc
g.append("text")
  .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
  .attr("dy", ".35em")
  .style("text-anchor", "middle")
  .text(function(d) { return d.data.age; });

// second arc for labels
var arc2 = d3.svg.arc()
  .outerRadius(radius + 20)
  .innerRadius(radius + 20);

// label attached to second arc
g.append("text")
  .attr("transform", function(d) { return "translate(" + arc2.centroid(d) + ")"; })
  .attr("dy", ".35em")
  .style("text-anchor", "middle")
  .text(function(d) { return d.data.age; });

d3js Redistributing labels around a pie chart

2 Answers