动画 102
到目前为止，我们已经了解了如何在 d3 中制作简单的动画，甚至添加一些交互。我们已经看到，这实际上就像在同一个地方创建元素一样简单。好消息是：d3 中的过渡非常灵活，可以非常巧妙地自定义，而编写起来不会过于复杂。更重要的是要知道该怎么做。
使用 transition() 方法后，可以指定持续时间和延迟的值。持续时间是转换将持续的毫秒数，而延迟是系统在启动转换之前将等待的毫秒数。语法为：
默认持续时间为 250 毫秒，无延迟。我发现 250 毫秒有点苛刻。在大多数情况下，过渡应该是显而易见的，所以我经常发现自己将持续时间增加到 500 或 1000。但除非有非常好的理由，否则持续时间不应太长。如果您使用 墨西哥移动数据库 它们来支持您的数据，您不会希望过渡占据中心位置，让它们花费几秒钟。
考虑以下两个示例（您必须从按钮开始）：
第二个是不是太糟糕了？你可能很难相信它只浪费了你 25 秒的时间。
缓动是将时间转化为属性变化的实际函数的技术名称。从前面的例子中，您可能已经注意到，值首先缓慢变化，然后变快，最后缓慢变化。好吧，事实证明，您可以使用不同的函数来获得不同的结果。在我的实践中，我只看到了这里显示的三个函数的用途，尽管还有许多其他函数。是的，您可以编写自己的函数，尽管我们不会在这里介绍这一点。语法与上面的类似：
mysquare.transition() .attr("x",320).ease("elastic")
（顺便说一下，更改属性或指定动画参数的顺序没有影响，所以请先使用 .ease，然后再使用 .attr）。
对于路径对象，您可以通过转换来更新每个点的位置。这样您就可以有效地将一个形状变成另一个形状。这对于折线图（或任何路径图表）尤其有用。
这样，如果您绘制的值发生变化，您可以非常有效地发现这些变化。相反，如果您只数据，则很难发现数据发生了变化。对于这两个示例，路径的“d”属性都已更新（因此它们与最简单的示例没有本质上的区别）。
有时 — — 实际上经常 — — 您希望在一个转换之后立即触发另一个转换。但如果您想知道的话，以下方法不起作用：