d3.js - d3 donut chart with curved labels -

i'm trying make donut chart curved labels d3.js, i've got chart labels in middle. here's code , working example:

http://codepen.io/anon/pen/ovmwyr

var width = 960, height = 500, radius = math.min(width, height) / 2; var grad=math.pi/180;  var color = d3.scale.ordinal().range(["#24b4d1", "#b1da42", "#fede17", "#d0164a","#ef5822"]);  var segmentval=[20,40,10,60,120]; var segments=["label 1","label 2","label 3","label 4","label 5"]; var name="center>>>";  var arc = d3.svg.arc().outerradius(radius - 5).innerradius(radius - 150);  var pie=d3.layout.pie().startangle(-30*grad).endangle(330*grad);       var svg = d3.select("body")      .append("svg")      .attr("width", width)      .attr("height", height)      .append("g")      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");    var g = svg.selectall(".arc")     .data(pie(segmentval))     .enter().append("g")     .attr("class", "arc");  var arctxt = d3.svg.arc() .innerradius(function(d,i){return i*35;}) .outerradius(function(d,i){return (i*35+30);}) .startangle(0) .endangle(2 * math.pi);  g.append("path")  .attr("fill", function(d, i) { return color(i); })  .attr("id", function(d,i){return "s"+i;})  .transition()  .ease("exp")  .ease("bounce")  .duration(2500)  .delay(function(d,i) { return i*10;})  .attrtween("d", tweenpie);  function tweenpie(b)  {   var = d3.interpolate({startangle: -30*grad, endangle:  -31*grad}, b);   return function(t) { return arc(i(t)); };  }  var text=g.append("text")   .text(function(d,i) { return segments[i] })   .style("font-size",20)   .append("textpath")   .attr("textlength",function(d,i){return 90-i*5 ;})   .attr("xlink:href",function(d,i){return "#s"+i;})   .attr("startoffset",function(d,i){return 3/20;})   .attr("dy","-1em") //.text(function(d){return d.label;}) /*.attr("text-anchor", "middle") .transition()  .ease("exp")  .ease("bounce")  .duration(2500)  .delay(function(d,i) { return i*10;})  .attrtween("transform", tweentext);*/  function tweentext(b)  {  var = d3.interpolate({startangle: -30*grad, endangle:  -31*grad}, b);  return function(t) { return "translate(" + arc.centroid(i(t)) + ")"; }; } 

what missing?

the mistake setting .text property of svg:text should setting on svg:textpath

here how in code moving .text after append("textpath"):

var text = g.append("text")     .style("font-size", 20)   .append("textpath")   .text(function(d, i) {     return segments[i];   })   .attr("textlength", function(d, i) {     return 90 - * 5;   })   .attr("xlink:href", function(d, i) {     return "#s" + i;   })   .attr("startoffset", function(d, i) {     return segmentoffsets[i];   }) 

i changed way segments offsets done, using hardcoded offsets every arc. have @ full code on codepen:

http://codepen.io/anon/pen/gjobyd