D3Js donut chart, avoid label text overlay's

Question

In my project I have big mount of different charts, everything handled with D3Js. One of charts should to be donut type with labels. So based on this tutorial I made this graph. As you can see sometimes (depends on data) label text goes overlay's.

My question is there any way to make it like in example below, based on highcharts from here:

Thanks.

Answer 1

I think there is a solution for the problem of labels getting overlapped, using contraint relaxing when you call the label up at: Solving D3 Label Placement with Constraint Relaxing.

I had a quick look at the labels here and it seems to work. This is my modified code snippet here:

alpha = 0.5;
spacing = 5;

function relax() {
again = false;
text.each(function (d, i) {
    a = this;
    da = d3.select(a);
    y1 = da.attr("y");
    text.each(function (d, j) {
        b = this;
        // a & b are the same element and don't collide.
        if (a == b) return;
        db = d3.select(b);
        // a & b are on opposite sides of the chart and
        // don't collide
        if (da.attr("text-anchor") != db.attr("text-anchor")) return;
        // Now let's calculate the distance between
        // these elements. 
        y2 = db.attr("y");
        deltaY = y1 - y2;

        // If spacing is greater than our specified spacing,
        // they don't collide.
        if (Math.abs(deltaY) > spacing) return;

        // If the labels collide, we'll push each 
        // of the two labels up and down a little bit.
        again = true;
        sign = deltaY > 0 ? 1 : -1;
        adjust = sign * alpha;
        da.attr("y",+y1 + adjust);
        db.attr("y",+y2 - adjust);   
    });

});

if(again) {
    setTimeout(relax,20)
}
}

relax();

fiddle

Just follow the next step in the tutorial linked above for updating the polylines to follow the labels to their new positions. Good luck!