анимировать угол начала дуги с помощью d3.js

Question

Я пытаюсь анимировать начальный угол дуги, используя D3.js

. Подойдет любая помощь или ссылка для справки.

Я попробовал следующее:

http://jsfiddle.net/87e3d4tj/

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