我可以补间 D3 弧的结束角度,但不能补间起始角度。我究竟做错了什么?

2024-05-04

我只是在玩这个演示并自己重新创建它:http://bl.ocks.org/mbostock/5100636 http://bl.ocks.org/mbostock/5100636

我可以定义一个新的 endAngle 并且它会很好地制作动画,但现在我也尝试为 startAngle 制作动画。我就是无法让它发挥作用。

function animateArc(newStart, newEnd) {

    myArc.transition().duration(750).call(arcTween, newStart, newEnd);

    function arcTween(transition, newStart, newEnd) {
        transition.attrTween("d", function(d) {
            var interpolateStart = d3.interpolate(d.startAngle, startAngle);
            var interpolateEnd = d3.interpolate(d.endAngle, endAngle);
            return function(t) {
                d.startAngle = interpolateStart(t);
                d.endAngle = interpolateEnd(t);
                return arc(d);
            };
        });
    }
}

我没有收到任何类型的错误,并且 endAngle 仍然有动画,但我添加的 startAngle 代码实际上只是......被忽略。

补间弧的 startAngle 的正确方法是什么?


有一些事情需要修改。 在原始脚本中,arc 函数中的起始值固定为 0。 然后,由于 arc 不提供起始值,因此它是通过数据提供的。

var arc = d3.svg.arc()
        .innerRadius(90)
        .outerRadius(150);

var background = svg.append("path")
        .datum({
        endAngle: τ,
        startAngle: 0
    })

var foreground = svg.append("path")
        .datum({
        endAngle: .127 * τ,
        startAngle: -.127 * τ
    })

等等瞧:http://jsfiddle.net/breizo/h74f180b/ http://jsfiddle.net/breizo/h74f180b/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

我可以补间 D3 弧的结束角度,但不能补间起始角度。我究竟做错了什么? 的相关文章

随机推荐