D3.js 过渡

过渡是指将元素的单个状态修改为其他状态的过程。 D3.js 提供 transition() 技术以在 HTML 页面中执行过渡过程。

让我们在本 D3.js 过渡章节中了解 transition() 技术的流程。

Transition() 方法

此方法存在于每个选择器中，并启动过渡过程。它支持各种选择方法，如 style() 和 attr()。 尽管 transition() 方法不支持 data() 和 append() 方法。它还为过渡提供了特定的技术，例如 ease(), duration 等。

一般的过渡可以表示如下

也可以借助 d3.transition() 方法直接创建过渡，然后将其应用于选择器，如下所示

让我们考虑一个例子。

示例

在以下示例中，我们将选择 body 项并通过调用 transition() 方法启动过渡。 之后，我们将指示将背景颜色从白色过渡到石灰绿色。

让我们创建一个插图来确定 transition() 方法的工作原理。

输出

如果我们希望进一步将背景颜色从石灰绿色更改为另一种颜色，我们可以简单地按如下方式更改颜色