如何在D3.js中应用动画（） _D3.js动画

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>

【如何在D3.js中应用动画（）】输出：