使用 d3.js 动画弧起始角

Question

我正在尝试使用 D3.js

为圆弧的起始角设置动画

任何帮助或link参考都行。

我试过以下方法：

d3.select('#my-path').datum({
      startAngle: endAngle,
      endAngle: ( 90 * (Math.PI/180) )
    })
    .transition()
    .duration(duration)
    .attrTween('d', d => {
      var interpolate = d3.interpolate(d.startAngle, d.endAngle);
      return function(t) {
        d.endAngle = endAngle;
        d.startAngle = interpolate(t);
        return arc(d);
      };
    });

Answer 1

我已经尝试了下面的方法，希望你也在寻找同样的方法。

https://jsfiddle.net/debasish007/eu7xo4mL/

var width = 400,
    height = 400,
    τ = (Math.PI/180);
var arc = d3.arc()
    .innerRadius(130)
    .outerRadius(150);

var svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")


var foreground = svg.append("path")
    .datum({
    endAngle: 90 * τ,
    startAngle: -90 * τ
})
    .style("fill", "blue")
    .attr("d", arc);

setTimeout(function () {
    foreground.transition()
        .duration(750)
        .call(arcTween, -30 * τ, 90 * τ);
}, 1500);

function arcTween(transition, newStartAngle, newFinishAngle) {

    transition.attrTween("d", function (d) {
        var interpolateStart = d3.interpolate(d.startAngle, newStartAngle);
        return function (t) {
                d.endAngle = newFinishAngle;
            d.startAngle = interpolateStart(t);
            return arc(d);
        };
    });
}

使用 d3.js 动画弧起始角

animate arc start angle with d3.js

javascript

css

animation

svg

tween