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

【问题标题】：How to animate the radius and the arc length of a pie chart in d3 (at the same time)?如何在d3中（同时）为饼图的半径和弧长设置动画？
【发布时间】：2016-08-08 19:33:34
【问题描述】：

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

这是我当前代码的 sn-p：

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

使用此代码，弧长可以很好地动画到新值，但半径“跳跃”到新值。

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

【问题讨论】：

移除延迟 Bostock 的例子

标签： d3.js transition pie-chart

【解决方案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));
            };
        });

【讨论】：