如何在 d3 中（同时）为饼图的半径和弧长设置动画？

Question

我想出了如何在 Bostock's Pie Chart Update 之后使用 d3 更改具有新值的饼图的弧长，但我很难弄清楚如何也为 pic 图表的半径设置动画同时。

这是我当前代码的一个片段：

pie_inner.value(function(d) {
    return d.toward === toward || toward === "both" ? d.spent : 0;
});

path_inner
    .data(function(d) {
        return pie_inner(d.data).map(function(m) {
            m.r = d.r;
            return m;
        })
    })
    .transition()
    .duration(750)
    .attrTween("d", function(d) {
        var interpolate = d3.interpolate(this._current, d);
        this._current = interpolate(0);
        return function(t) {
            arc_inner.innerRadius(d.r - thickness);
            arc_inner.outerRadius(d.r);

            return arc_inner(interpolate(t));
        };
    });

使用此代码，弧长很好地动画化为新值，但半径 "jumps" 动画化为新值。

我看到 this code 对弧长和半径都进行了动画处理，但它是按顺序执行的，而不是同时执行的。

Answer 1

我正在使用函数 outerRadius() 设置半径，但我发现如果我只设置属性，那么它就起作用了：

pie_inner.value(function(d) {
    return d.toward === toward || toward === "both" ? d.spent : 0;
});

path_inner
    .data(function(d) {
        return pie_inner(d.data).map(function(m) {
            m.r = d.r;
            return m;
        })
    })
    .transition()
        .duration(750)
        .attrTween("d", function(d) {
            d.innerRadius = d.r - thickness;
            d.outerRadius = d.r;
            var interpolate = d3.interpolate(this._current, d);
            this._current = interpolate(0);

            return function(t) {
                return arc_inner(interpolate(t));
            };
        });

如何在 d3 中（同时）为饼图的半径和弧长设置动画？

How to animate the radius and the arc length of a pie chart in d3 (at the same time)?

d3.js

transition

pie-chart