如何在 D3.js 中应用动画?


如何在 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>

输出 :



Made with ❤️ in Chengdu. Copyright reserved 2019-2023.

蜀ICP备20006366号-1