Add the lines from the donut to the text

For the lines, we once again follow the same principle. We add the lines and use an attrTween function to determine how to draw the lines at each step of the animation:

// add the lines which point to the labels 
var lineElements = pieContainer.selectAll(".lines").data(arcs); 
lineElements.enter() 
    .append("path") 
    .attr("class", "lines") 
    .merge(lineElements) 
    .transition() 
    .ease(d3.easeCircle) 
    .duration(2000) 
    .attrTween("d", tweenLines)

The interesting stuff happens in the tweenLines function:

function tweenLines(d) { 
    var interpolator = getArcInterpolator(this, d); 
    var lineGen = d3.line(); 
    return function (t) { 
        var dInt = interpolator(t); 
        var start = arc.centroid(dInt); 
        var xy = labelsArc.centroid(dInt); 
        var textXy = [xy[0],xy[1]]; 
        // Change the final line a little bit to 
        // make sure we can tween nicely, and we have 
        // a little bit of extra space 
        textXy[0]= textXy[0] * 1.15 
        return lineGen([start,xy,textXy]); 
    } 
}

What we do here is we use the d3.line() function (which we'll explore in more depth in the following example) to draw a line from the center of the donut (arc.centroid) to the position of the text (labelsArc.centroid). To make it look better, we add an additional corner just before the text. The result of this looks like this:

The final step we're going to take is add some interactivity to the donut.