Interpolating arcs can lead to error messages about d3-interpolate HOT 3 CLOSED

This is the expected behavior of transition.attr which uses d3.interpolateString to interpolate strings, and has no understanding of SVG path data.

If you want to use a path-aware interpolator, you should use transition.attrTween instead and supply a different interpolator. A convenient technique is to use a piecewise linear curve (a polyline) as the intermediate representation to allow smooth transitions between arbitrary shapes; see https://bl.ocks.org/mbostock/3916621 for an example.

from d3-interpolate.

Thanks for the explanation, this makes sense. What I ended up doing is use d3.interpolateString but override its result by rounding the 4th and 5th parameter in "A" (arc) commands:

transition.attrTween("d",function() {
  var basic = d3.interpolateString(d3.select(this).attr("d"),targetArc);
  return function(t) {
    return basic(t).replace(/A[^A-Z]+/g,function(match) {
      return "A" + match.substr(1).split(/[, ]+/).map(function(value,index) {
        return index == 3 || index == 4 ? String(Math.round(parseFloat(value))) : value;
      }).join(",");
    });
  };
})

This gets rid of the error messages when interpolating arcs (e.g. in pie charts).

from d3-interpolate.

here is the live demo https://observablehq.com/@d3/path-tween

from d3-interpolate.