D3.js是一个Javascript库, 主要用于数据驱动单据。 D3与HTML5一样使用SVG。使用d3.js可以完成许多事情, 包括制作图表, 添加动画和可视化数据。可以使用d3.js过渡功能来应用动画, 该功能提供许多功能, 如延迟, 缓动, 淡入淡出, 持续时间, 缩放等。
方法：可以在D3.js提供的过渡帮助下完成d3中的动画。首先, 创建一个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>lsbin</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>输出：
