D3.js的转换 最后更新时间：2021年03月18日 ## 转换 d3.js中的转换与svg的转换属性不同，d3中的转换更倾向于转换的过程，是一种过渡的状态。即，在一个形态转换成另一个形态中发生的事儿。 ## transition 在d3.js中，提供了一个`transition()`方法用来在html中执行转换。 transition（）方法可用于所有选择器，并启动转换过程。 此方法支持大多数选择方法，如-attr（），style（）等。但是，它不支持append（）和data（）方法，这些方法需要在transition（）方法之前调用。 此外，它提供了特定于转换的方法，如duration（），ease（）等。 示例： ```html <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 <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 <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这个单词才开始放大和颜色的过渡。
Comments | NOTHING