score:0

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

var arc_group = d3.select('#'+pieId+' .sliceholder');

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

var arc_group = d3.select('#'+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()
        .sort(null)
        .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:

svg.selectAll(".arc")
        .data(function(d) { return pie(d.legends); })
        .enter().append("path")
        ...
        .each(function(d) { this._current = d; });

Working jsfiddle here.


Related Query

More Query from same tag