There are a couple of problems with your code. First, the selector

var arc_group ='#'+pieId+' .sliceholder');

doesn't work because the g element with class sliceholder is a subelement of the SVG. You need

var arc_group ='#'+pieId+' > .sliceholder');

Second, you can't pass in the raw data when updating, you need to process it with a pie layout first. That is,

paths = arc_group.selectAll("path").data(data[0].legends);

won't work, you need

var pie = d3.layout.pie()
        .value(function(d) { return d.population; });
    paths = arc_group.selectAll("path").data(pie(data[0].legends));

Third, you've missed some initialisation when copying the arcTween code. You need to set the initial values for ._current:

        .data(function(d) { return pie(d.legends); })
        .each(function(d) { this._current = d; });

Working jsfiddle here.

Related Query

More Query from same tag