D3js: Horizontal lines in pie chart work, but don't understand code

Vote count:

0

I love this pie chart. It slices the lines to the text labels. Those labels are placed in a way that the lines are perfectly horizontal. And although the code is on the page there, I don't understand how this is done.

Guess it's this part:

function midAngle(d){
    return d.startAngle + (d.endAngle - d.startAngle)/2;
}
text.transition().duration(1000)
    .attrTween("transform", function(d) {
        this._current = this._current || d;
        var interpolate = d3.interpolate(this._current, d);
        this._current = interpolate(0);
        return function(t) {
            var d2 = interpolate(t);
            var pos = outerArc.centroid(d2);
            pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
            return "translate("+ pos +")";
        };
    })

Tried to read the docs and get the concept of start/endangle, but failed.

I was playing around with a pie chart that can handle collapsing of labels (http://ift.tt/1kk7e9K after reading this post) and hoped to be able to turn it into a chart with horizontal lines that exit the arc exactly in it's middle.

Can anyone please tell me what this code does or give me a hint how to modify my fiddle?

asked 44 secs ago

user3255061

19