在 d3.js 中调整饼图大小的转换答案

【问题标题】：Transition on pie-chart resize in d3.js在 d3.js 中调整饼图大小的转换
【发布时间】：2012-10-23 22:01:10
【问题描述】：

我正在寻找一个关于如何为饼图调整大小（弧的路径）进行转换的示例。我一直在查看this example，但我仍然不知道如何修改它以在调整大小时进行过渡。到目前为止，我可以通过更改圆弧对象的外半径（和内半径）来调整饼图的大小，但过渡没有运气。 Here is the example我正在努力。

arc.innerRadius(newInnerRad)
   .outerRadius(newOuterRad);

path.transition().duration(500).attrTween("d", arcTween);

function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

有什么想法吗？

【问题讨论】：

标签： javascript svg d3.js transition pie-chart

【解决方案1】：

如果你创建arcTween inline 并为半径添加一个插值器，它就可以工作——参见the updated fiddle。

【讨论】：

是的，这行得通。谢谢！我试图弄清楚为什么 arcTween 必须内联。我试过func(a){arcTween.call(this, a, newRadius)} 但没有成功。这不是什么大问题，但我想了解它。
需要内联创建补间函数以反映半径的变化值——如果您像以前一样创建它，它只会在开始时获取一次半径。您现在不是定义一次arcTween，而是一次又一次地定义它，每次更新一次。不过，这不是唯一的方法——您可以将半径值与数据一起保存（类似于角度），然后在补间函数中从那里获取值。我更喜欢这种方式，因为我发现它更容易理解。
今天你的很多答案对我有帮助 Lars...你能解释一下 `var i = d3.interpolate(this._current, a)` 的作用吗？我不明白您如何插入 2 个对象以及这对动画有何影响？
@Ian See the documentation -- 它创建了一个函数，在这种情况下给出两个数字之间的值，您需要确定动画当前状态的正确值。
@LarsKotthoff 是的，绝对 - 但这里的参数是 2 个对象被传递到 interpolate 而不是 2 个数字 - 这让我感到困惑