How can I update text-label in d3 donut according with my array's data

Question

i am trying to add the percentage instead of labels here according with array. I need label to be updated after every donut's transition. If I insert just .text(function (d) { return d.data.value;}); it shows me only the second array's value and doesn't change. How can I fix it?

PS: I saw some similar questions here - but I cant intergate their solution to my donut.

Answer 1

Update the label on the end of the transition:

slice       
    .transition().duration(1000)
        .each("end", function(d,i){
            d3.selectAll('.labels text')
                .text(function(d) {
                  return (((d.endAngle - d.startAngle) / (2 * Math.PI)) * 100).toFixed(0) + '%';
                })
            })
    .attrTween("d", function(d) {
        this._current = this._current || d;
        var interpolate = d3.interpolate(this._current, d);
        this._current = interpolate(0);
        return function(t) {
            return arc(interpolate(t));
        };
    });

Updated example .