使用d3插入startAngle和endAngle

Question

无法同时将SVG的红色部分设置为两侧，即startAngle和endAngle。

texturePosition.X = (windowWidth - textureWidth) / 2;
texturePosition.Y = (windowHeight - textureHeight) / 2;

这里是小提琴链接：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);
        };
    });