интерполировать startAngle и endAngle, используя d3

Question

Невозможно анимировать красную часть SVG в обе стороны, то есть startAngle и endAngle одновременно.

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);
  };
});

вот ссылка на скрипку: https://jsfiddle.net/debasish_pothal/3ajvn16g/53/

Answer 1

Я обновил скрипку, вам нужно использовать 2 интерполятора. Я оставил выражения открытыми, вы можете обновить переменные позже:

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);
        };
    });