使用 d3 插入 startAngle 和 endAngle

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

这里是 fiddle link : https://jsfiddle.net/debasish_pothal/3ajvn16g/53/

Answer 1

我更新了fiddle，你需要使用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);
        };
    });

使用 d3 插入 startAngle 和 endAngle

interpolate both startAngle and endAngle using d3

javascript

svg

tween

d3.js