使用 D3 创建动画和过渡

Connect Asia Data learn, and optimize business database management.
Post Reply
zakiyatasnim
Posts: 336
Joined: Tue Jan 07, 2025 4:50 am

使用 D3 创建动画和过渡

Post by zakiyatasnim »

在交互式可视化中,有一个词叫“反应性”。好吧,也许不是字面意思,但差不多。事实上,反应性,或者说可视化对用户操作做出响应的倾向,确实可以帮助用户参与可视化,并帮助他们理解其结果。这两者通常都是好事。如何实现这种反应性?通过动画。所以我要说的是,如果做得好,动画可以让任何交互式数据可视化变得更好。这是怎么做到的?

当与交互结合时,这是一种向用户提供反馈的非常有用的方式。自上次命令以来发生了什么变化?如果屏幕上的内容从一个状态动画到另一个状态,那么它很明显,很突出,也很有意义。或者,当显示任何形式的实时数据时,动画几乎是必需的。
动画可以在图表加载时将焦点集中在重要内容上。我们的视觉对运动非常敏感,因此合理使用这些介绍过渡有助于大大减轻从图表中获取正确信息所需的努力。
比较这两个图表:

哪一个更能吸引观众对最后一小节的注意力?

[示例旁注:它们都使用相同的模型。单击按钮即可开始动画。如果 墨西哥移动数据库 图表上没有任何内容,单击按钮将会出现一些内容。]

动画可以很好地与诸如增长、扩张、移动、缩小等隐喻配合使用,因此它可以真正增强试图传达任何这些想法的可视化的表现力。
话虽如此,动画也肯定会破坏你的视觉效果。以下是三个常见问题。

动画非常突出。它可以很好地吸引人们注意图表中特定的、明确的部分。但是,如果动画太多会发生什么?如果没有其他提示,观众很难确定将注意力集中在哪里。
跨多种状态的动画(如动画数据的视频)使它们难以相互比较,而不是并排显示各种状态的静止图像。
如果动画不是连续的,如果图表在动画过程中以某种方式被消灭,这会导致变化视盲,这几乎抵消了您希望从动画中获得的任何好处。看这个例子:
动画时,线条会经历空白状态,这使得追踪原始状态和最终状态之间的变化几乎不可能。检测变化的唯一方法是关注一个给定点并记住其原始位置,但这非常低效。

现在该怎么办呢?
我们已经了解了动画在数据可视化中的作用。现在,让我们开始吧!为此,我们使用d3。d3在数据动画方面有很多可能性,而且实现起来相对轻松。

原理
如果您知道如何在 d3 中绘图,那么您几乎就知道如何制作动画。(如果您还不知道,Alignedleft有一个精彩的教程集可以帮助您入门,d3 网站列出了更多教程,包括一些由我本人编写的教程。)动画在 d3 中被称为“过渡”是有原因的。动画的技术定义可以是,在一定时间内,对象的一个​​或多个特征会从一个值过渡到另一个值。我们所说的特征是指几乎任何可以用数字表示的东西。
Post Reply