interpolate both startAngle and endAngle using d3

Question

Not able to animate the red part of the SVG to both sides i.e. startAngle and endAngle at the same time.

d3.select(selector).datum({
  startAngle: startAngle,
  endAngle: endAngle
})
.transition()
.delay(i * duration == 0 ? 0 : i * duration - 150)
.duration(duration)
.attrTween('d', d => {
  var interpolate = d3.interpolate(d.startAngle, d.endAngle - 0.03);
  return function(t) {
    d.endAngle = interpolate(t);
    return arc(d);
  };
});

here is the fiddle link : https://jsfiddle.net/debasish_pothal/3ajvn16g/53/

Answer 1

I updated the fiddle, you need to use 2 interpolators. I left the expressions open, you can update the variables later:

https://jsfiddle.net/ibowankenobi/3ajvn16g/52/

d3.select('#g-1').datum({startAngle: angles[1].endAngle, endAngle: new_angles[1].endAngle})
    .transition()
    .duration(duration)
    .attrTween('d', d => {
    var interpolateEnd = d3.interpolate(angles[2].startAngle, new_angles[2].startAngle - 0.03);
        var interpolateStart = d3.interpolate(angles[0].endAngle + 0.03, new_angles[0].endAngle);

    //var interpolate = d3.interpolate(d.startAngle, d.endAngle - 0.03);

    return function(t){
            d.startAngle = interpolateStart(t);
            d.endAngle = interpolateEnd(t);
            return arc(d);
        };
    });