D3.js animation for donut labels

I already have a donut chart in d3.js.

The animation for the labels is some thing like this right now :

starting point of labels : the labels are all in the center of the donut

ending point : they end up going behind the arcs.

Now below is what i am trying to achieve....

what i want to achieve :

I want to change the starting point of labels.

I want the labels to appear from behind the arcs of the donuts instead of the center.

The ending point is fine like it is now.

Is there a way i can achieve this ?

i.e change the emission point of the labels instead from the center they should appear from behind the arcs.

Here is the code that i am trying to modify :

 var text=svg.selectAll('text')
  .data(pie(dataset.data))
  .enter()
  .append("text")
  .transition()
  .duration(1000)
.attr("transform", function (d) {
    console.log(d);
    console.log(arc.centroid(d));
     var c = arc.centroid(d),
            x = c[0],
            y = c[1],
            h = Math.sqrt(x*x + y*y);
   return "translate(" + (x/h * labelr) +  ',' +
           (y/h * labelr) +  ")";
  })
  .attr("dy", ".4em")
  .attr("text-anchor", "middle")
  .text(function(d){
      return d.data +"%";
  })
  .style({
      fill:'#000',
      'font-size':'11px'
  });   

Below is the link to the fiddle :

https://jsfiddle.net/ahc4wdjk/