在交互式可视化中，有一个词叫reactive，指的是以可视化的方式来响应用户的行为，帮助用户进行可视化并理解其结果。这个很有用。那如何来实现这种交互呢？通过动画。
如果处理得当，动画可以展现出不错的可视化交互数据...
是怎样的呢？
交互可以有效地提供用户的反馈。我们可以知道自上次用户操作之后发生了什么变化？如果屏幕上的内容从一种状态变成另一种状态，动画可以使这一过程更加明显，突出而更具含义。另外，当需要显示任何形式的实时数据时，动画是必不可少的。
动画可以使人们更加关注图表的重要部分。我们的视觉对运动非常敏感，因此引入和使用这些transitions可以大大地帮助我们更加容易地从图表中获取到有用的信息。
比较下面两个图表：
哪一个更能让用户注意到柱状图中最后的那一个柱子呢？
[说明：以上两个图使用了相同的model。点击按钮可以开始一个动画。如果图中内容为空，点击按钮可以显示图表。]
动画可以和隐喻一起使用，比如增大，展开，移动，缩小等等。所以它可以真正提高可视化的表现力，并试图传达任何要表达的意思。
这就是说，动画也肯定会破坏你的可视化。这里有三个普遍问题。
动画非常突出。把注意力放在图表的一个特定的，明确的部分是很好的。但是当动画太多时会发生什么呢？没有其它的提示，用户很难将注意力集中到他们需要关注的地方。
动画跨越了多种状态（如动画数据视频），使得它们难以相互比较，这不同于我们将各种不同状态的静态图并排显示出来可以很容易地进行比对。
如果动画不连续，又或者图表忽然莫名其妙地消失，这就会导致一个变化盲视，从而大大地抵消了你希望从动画中能获得的效果。
看这个例子。
动画过程中线经过了一个空白状态，从而使我们很难去跟踪原始状态和最终状态之间的变化。找出变化的唯一方法是将注意力集中到一个点上，然后记住它的原始位置，但这样做效率太低。
现在我们怎么做呢？我们已经看到动画在数据可视化中的作用了。现在我们来做吧！我们使用d3，它提供了多种数据动画的方式，使用它实现动画效果会相对容易一些。
原则如果你知道如何在d3中绘图，你就知道如何实现动画。（如果你还不知道，Alignedleft有一个精彩的教程集，可以帮助你如何开始，d3站点也列出了很多，包括一些我提供的。）出于某种原因，动画在d3中被称之为transitions。动画在技术上被定义为，对象的一个或多个特征在经过一段时间之后，从一个值过渡（transitions）到了另一个值。
那么我们所说的特征指的是什么呢？它基本上代表了任何可以用数字表示的东西。
几个transitions的例子不出所料，当你随着时间来平滑地更新item的位置时，它就移动了。在svg中，对大多数形状而言位置是确定的，例如我们这里的蓝色矩形，它的位置由属性x和y的值来确定，对应于形状的左上角。对于圆形，使用cx和cy或者中心点的坐标来确定位置。对于路径，例如我们的红色三角形，实际上通过"d"属性指定了所有点的位置。
同样，当你改变大小时，对象会增大（或收缩）。你可以使用width（宽）和height（高）来确定矩形的大小，或者使用r（半径）来确定圆形的大小。
颜色也是一个数字属性，从一种颜色过度到另一种颜色也是可能的（这个也很有用）。在svg中，颜色是由fill或stroke定义的样式属性。
与颜色一样，改变透明度也很有用。当opacity被设置为0时，对象是完全透明的。所以要实现对象的淡入淡出效果，需要对opacity属性进行transition操作。
如何实现现在我们已经看到transitions可以用来些干什么了，让我们来看看如何用d3来编写代码。
我们回到第一个例子。我们尽量简单一点。
在d3中要创建一个像这样的方块，我们可以这样写：
var mySquare=svg.append("rect") .attr("x",60) .attr("y",60) .attr("width",60) .attr("height",60);