JavaScript-D3入門二-最基本的動畫效果
阿新 • • 發佈：2018-11-19
結合SVG, 下面的程式碼演示了最簡單的動畫效果
<html> <head> <title>D3的最基本動畫效果</title> <script src='/d3/d3.min.js'></script> <style> </style> </head> <body> <div id="infovizDiv"> <svg style="width:500px;height:500px;border:1px lightgray solid;"> </svg> </div> </body> </html> <script type="text/javascript"> d3.select("svg") .append("circle") .attr("r", 20) .attr("cx", 20) .attr("cy", 20) .style("fill", "red"); d3.select("svg") .append("text") .attr("id", "a") .attr("x", 20) .attr("y", 20) .style("opacity", 0) .text("HELLO WORLD"); d3.select("svg") .append("circle") .attr("r", 100) .attr("cx", 400) .attr("cy", 400) .style("fill", "lightblue"); d3.select("svg") .append("text") .attr("id", "b") .attr("x", 400) .attr("y", 400) .style("opacity", 0) .text("Uh, hi."); //延遲一秒出現 d3.select("#a").transition().delay(1000).style("opacity", 1); //延遲三秒出現 d3.select("#b").transition().delay(3000).style("opacity", .75); //circle位移 d3.selectAll("circle").transition().duration(2000).attr("cy", 200); </script>