如何在 D3.js 中应用动画？
D3.js是一个 Javascript 库，主要用于数据驱动的文档。 D3 像在 HTML5 中一样使用 SVG。除了制作图表、添加动画和可视化数据之外，许多事情都可以使用 d3.js 完成。动画可以使用 d3.js 过渡特性来应用，它提供了许多功能，如延迟、缓动、褪色、持续时间、缩放等等。
方法： d3 中的动画可以在 D3.js 提供的转换的帮助下完成。首先，制作一个 div 元素并向其添加一些文本。然后使用 d3.select()函数选择此元素。在此之后使用 d3.js 中可用的转换函数在选定的 HTML 元素上应用动画。
示例 1：此示例使用 d3.select()函数和 d3.transition()函数将效果应用于 html 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>GeeksforGeeks</title>
</head>
<body>
<div>
<h3 style="color:green"> Geeks for Geeks</h3>
</div>
<script type = "text/javascript"
src =
"https://d3js.org/d3.v4.min.js">
</script>
<script>
d3.selectAll("h3").transition()
.style(
"font-size", "50px").delay(1000).duration(1000)
</script>
</body>
</html>
输出：
示例 2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
color:green;
display: flex;
margin: 0;
font-size: xx-large;
padding: 10px;
width: 100%;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
<body>
<div>
<p> Geeks for Geeks</p>
</div>
<script type = "text/javascript"
src = "https://d3js.org/d3.v4.min.js">
</script>
<script>
d3.selectAll("p").transition()
.style(
"transform", "rotate(180deg)").delay(1000).duration(1000)
.style("color", "black").duration(1000)
</script>
</body>
</html>
输出 ：
