Q:

updating text position on pie chart update

I've been trying to adapt this design into a dynamic pie chart.
Everything has gone reasonably well aside from getting the text to reposition on update. 
In the example below, I am first removing the text label and then redrawing, I don't think this is the best way to do it, I was trying to approach it with the code that is commented out just underneath but have been unsuccessful.
Plunk
Offending code; 
function updatePath() {

    g = svg.datum(donutData).selectAll(".arc")
      .data(pie)
    g.select("path")
      .transition()
      .duration(750)
      .attrTween("d", arcTween) // redraw the arcs

    svg.selectAll(".donutText").remove()

    pieTextLabel()

}

// Attempt 1 Below

    /*  

        svg.selectAll(".donutText")
        .style("opacity", 0)
          .attr("dy", 18)
          .append("textPath")
          .attr("startOffset", "50%")
          .style("text-anchor", "middle")
          .attr("xlink:href", function(d, i) {
            return "#donutArc" + i;
          })
          .text(function(d) {
            return d.value;
          })
          .transition()
          .duration(1000)
          .style("opacity", 1);

      */

  function pieTextLabel() {
    var selectText = svg.selectAll(".donutText")
      .data(donutData)

    selectText
      .enter().append("text")
      .attr("class", "donutText")
      .attr("dy", 18)
      .append("textPath")
      .attr("startOffset", "50%")
      .style("text-anchor", "middle")
      .attr("xlink:href", function(d, i) {
        return "#donutArc" + i;
      })
      .text(function(d) {
        return d.value;
      });

    selectText.exit().remove()

  }

  function drawPie() {
    var g = svg.selectAll(".donutArcSlices")
      .data(pie(donutData))
      .enter().append("g")
      .attr("class", "arc");

    var path = g.append("path")
      .attr("d", arc)
      .style("fill", function(d) {
        return color(d.data.label);
      })
      .each(function(d, i) {
        this._current = d;

        var firstArcSection = /(^.+?)L/;
        var newArc = firstArcSection.exec(d3.select(this).attr("d"))[1];
        newArc = newArc.replace(/,/g, " ");

        svg.append("path")
          .attr("class", "hiddenDonutArcs")
          .attr("id", "donutArc" + i)
          .attr("d", newArc)
          .style("fill", "none");
      })

  }

Having trouble cracking this - any help/advice is much appreciated!
Thanks

A:

It's because you didn't update the path
First delete the old path
svg.selectAll("path").remove()

Then recreate it
var path = g.append("path")
  .attr("d", arc)
  .style("fill", function(d) {
    return color(d.data.label);
  })
  .each(function(d, i) {
    this._current = d;

    var firstArcSection = /(^.+?)L/;
    var newArc = firstArcSection.exec(d3.select(this).attr("d"))[1];
    newArc = newArc.replace(/,/g, " ");

    svg.append("path")
      .attr("class", "hiddenDonutArcs")
      .attr("id", "donutArc" + i)
      .attr("d", newArc)
      .style("fill", "none");
  })

see http://plnkr.co/edit/WTuX38GCgIFLFfc1QPVv?p=preview

