D3 sunburst with updated data: multiple transitions still snap, not smooth

Question

This question builds on Lars Kotthoff's very helpful answer to the problem of transitioning with a D3 sunburst diagram that is based on different JSON data: d3 - sunburst - transition given updated data -- trying to animate, not snap

I've tried the final fiddle that Lars provided but when there is more than one transition, the animation still fails and we get snapping. The problem can be seen in this updated fiddle that contains a second transition .

From what I can tell, the x0 and dx0 values are not properly stored with the path object when calling the arcTweenUpdate function. When I check what the this object looks like inside arcTweenUpdate function, I get an [object SVGPathElement] at the beginning of the function when this.x0 and this.dx0 are read, and I get an [object Window] when the new values are written later. I'm relatively inexperienced with JS but that seemed like it could point to the problem.

Any help with addressing this and making the above fiddle work for multiple transitions (eg back and forth between the two JSONs) is highly appreciated. Thanks!

Answer 1

Well you've spotted a bug in my earlier answer :)

The problem is, as you say, that the saved values aren't updated properly. That's because this inside the callback doesn't refer to the path DOM element anymore. The fix is simple -- save a reference to this in the function at the level above and use that reference:

function arcTweenUpdate(a) {
  var i = d3.interpolate({x: this.x0, dx: this.dx0}, a);
  var that = this;
  return function(t) {
    var b = i(t);
    that.x0 = b.x;
    that.dx0 = b.dx;
    return arc(b);
  };
}

Complete demo here .