D3.js - 过渡效果 (Transition)

D3.js - 过渡

D3.js 中的过渡（Transition）是指元素属性或样式在指定持续时间内，从一种状态平滑地变化到另一种状态的过程。D3.js 提供了 transition() 方法来对 HTML 或 SVG 元素进行动画处理。本章将探讨如何有效使用过渡。

transition() 方法

transition() 方法可以在任何 D3 选择集（selection）上调用，它会为选中的元素启动过渡过程。它支持大多数用于改变属性（attributes）（如 attr()）和样式（styles）（如 style()）的选择集方法。然而，改变 DOM 结构的方法（如 append() 或 data()）通常应在 transition() 之前调用。过渡自身也有一些特定的配置方法，比如 duration() 和 ease()。

可以通过在选择集后面链式调用 transition() 来定义一个简单的过渡：

d3.select("body")
    .transition()
    .style("background-color", "lightblue");

你也可以创建一个过渡对象，然后将其应用于一个选择集，尽管对于简单的过渡来说，链式调用更常见。如果你使用 d3.transition() 创建一个过渡对象，你可以对其进行配置，然后将其传递给选择集的 transition() 方法。这对于同步多个过渡或重用过渡参数很有用。

const t = d3.transition()
    .duration(2000) // Animate over 2 seconds
    .ease(d3.easeLinear); // Use a linear easing function

d3.select("body")
    .transition(t) // Apply the pre-configured transition
    .style("background-color", "lightblue");

注意：虽然上述通过传递过渡对象 t 的方法可行，但在现代 D3 中，除非你有充分的理由重用过渡对象，否则更常用的做法是直接在 selection.transition() 之后链式调用配置方法。

一个最小示例

让我们创建一个基本示例来观察过渡如何工作。这个示例将对页面的背景颜色进行动画处理。

创建一个新的 HTML 文件，例如 transition_example.html，包含以下代码：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>D3 Transition Example</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
 </head>
 <body>
  <h3>Simple Transitions</h3>
  <script>
   // Select the body element
   d3.select("body")
     .transition() // 启动一个过渡
     .duration(1500) // 设置持续时间为 1.5 秒
     .style("background-color", "lightblue"); // 目标样式
  </script>
 </body>
</html>

在此示例中，我们选择 <body> 元素。然后，transition() 方法启动一个过渡。接着，我们使用 duration(1500) 指定过渡应持续 1500 毫秒（1.5 秒）。最后，.style("background-color", "lightblue") 定义了目标状态：背景颜色应变为浅蓝色。浏览器将平滑地将颜色从当前颜色（很可能是白色）动画过渡到浅蓝色。

如果你想链式调用另一个过渡，例如在第一个过渡完成后将背景颜色从浅蓝色变为灰色，你可以这样做：

d3.select("body")
  .transition()
  .duration(1500)
  .style("background-color", "lightblue")
  .transition() // 链式调用另一个过渡
  .duration(1500)
  .delay(500) // 可选：在此过渡开始前等待 0.5 秒
  .style("background-color", "gray");

这展示了过渡如何可以按顺序执行。在现有过渡上进行的每个后续 transition() 调用都会等待前一个过渡完成后再开始（除非同时应用了相对于前一个过渡结束时间的特定 delay）。