如果我不更新数据，我可以为 D3 圆弧制作动画吗？答案

【问题标题】：Can I animate D3 pie arcs if I'm not updating data?如果我不更新数据，我可以为 D3 圆弧制作动画吗？
【发布时间】：2016-01-26 17:54:16
【问题描述】：

我想画一个 D3 饼图。最初，弧段将被隐藏，然后我想逐个地为它们设置动画，以使它们可见，以响应应用程序流中的键盘/鼠标事件。

应用程序流程是线性的：例如第 1 部分，为第一个弧段设置动画以使其可见。第 2 部分，为第二段设置动画以使其可见。第 3 部分等，直到馅饼完全可见。

我有兴趣使用 Swiper 项目 - http://www.idangero.us/swiper/api/#.VqemYVOLQmI - 所以移动到每张幻灯片会触发一个事件，使弧可见（即 onSlideChangeEnd 将显示每个连续弧）

我可以采取的一种方法是将饼图部分绘制为最初不可见，然后使用样式转换使其可见：

d3.selectAll(“.segment1”).transition().duration(500).style("fill", "#7FB9E6”);

这可以使每个顺序弧可见以响应每个事件。

但这并不是我想要的外观 - 我希望弧形填充上的动画看起来像是从左向右移动，例如在这种“扫地”动画中：http://jsfiddle.net/thmain/xL48ru9k/1/

如果我不使用 D3 更新数据，是否可以使用这种动画（即图表已经创建，我只是希望弧线按顺序显示以响应事件）。

我是动画/补间的新手，非常感谢您的帮助。谢谢。

【问题讨论】：

【解决方案1】：

一个想法是用最初设置为零的所有值来初始化图表。然后，当您的用户浏览您的内容时，只需根据需要使用每个项目各自的数据值更新每个元素。

我认为（我没有尝试过）它会产生“碰撞”效果，每次用户滑动（或任何函数调用）时，图表的切片都会“添加”一个切片并调整可见的大小显示的数据的切片部分（如果有意义的话）。

【讨论】：

【解决方案2】：

最简单的方法可能是直接利用d3.svg.arc 形状（饼图只是创建其中许多的“助手”）。如果您知道数据的总和是多少，您可以单独计算每个弧的角度，并随意显示/隐藏/动画。

【讨论】：