D3.js的转换

转换

d3.js中的转换与svg的转换属性不同，d3中的转换更倾向于转换的过程，是一种过渡的状态。即，在一个形态转换成另一个形态中发生的事儿。

transition

在d3.js中，提供了一个transition()方法用来在html中执行转换。
transition（）方法可用于所有选择器，并启动转换过程。此方法支持大多数选择方法，如-attr（），style（）等。但是，它不支持append（）和data（）方法，这些方法需要在transition（）方法之前调用。此外，它提供了特定于转换的方法，如duration（），ease（）等。
示例：

<html>
   <head>
      <script src = "https://d3js.org/d3.v6.js"></script>
   </head>
   <body>
      <div id="one"></div>
      <script>
         var t = d3.transition()
   .duration(2000);
d3.select("body")
   .transition(t)
   .style("background-color", "gray");;
         d3.select("#one").append("svg").attr("width",210).attr("height",210).append("ellipse").attr("cx",30).attr("cy",50).attr("rx",30).attr("ry",50).transition().style("fill","lightblue");
      </script>
   </body>
</html>

动画

D3.js通过过渡支持动画。可以通过正确使用过渡来做动画。转换是Key Frame Animation的有限形式，只有两个关键帧 - 开始和结束。起始关键帧通常是DOM的当前状态，而结束关键帧是您指定的一组属性，样式和其他属性。转换非常适合转换到新视图，而不需要依赖于起始视图的复杂代码。

duration()

duration()可以让过渡平滑地发生而不是瞬间发生。
示例：

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v6.js"></script>
   </head>
   <body>
      <script>
            d3.select("body").transition()
         .style("background-color", "gray")
         .duration(3000);
      </script>
   </body>
</html>

示例中，利用durantion()让页面背景花费3秒的时间过渡到灰色。

delay()

delay()方法可以让过渡在一段时间以后再发生，而不是一触发的瞬间就进行。
示例：

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v6.js"></script>
   </head>
   <body>
      <h3 id="one">one<h3>
      <script>
            d3.select("body").transition()
         .style("background-color", "gray")
         .duration(2000);
         d3.select("#one").transition()
         .style("color","rgb(0,128,128)")
         .style("font-size","240").delay(2000).duration(2000);
      </script>
   </body>
</html>

示例中，先是背景进行了颜色的过渡，两秒后，one这个单词才开始放大和颜色的过渡。