【d3.js教程03】動態初探索 · D3.js征途

![](https://box.kancloud.cn/2016-04-19_57161003ea2c1.jpg) ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/d3.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <svg></svg> <script type="text/javascript"> var dataset = [1,2,3,4,5,6,7,8,9,10]; //指定數據集 var svg = d3.select("svg"); //添加svg svg.attr("width",1000) .attr("height",1000) .selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x",100) //設置橫縱坐標 .attr("y",100) .attr("width",20) //設定rect的寬高 .attr("height",20) .attr("fill","red") .transition() //從紅色過渡到藍色 .duration(1000) .attr("fill","steelblue") .transition() //從藍色過渡回紅色 .duration(1000) .attr("fill","red") .transition() //顏色過渡的同時位置過渡 .duration(4000) .ease("elastic") .delay(function(d,i){ //每個rect過渡進行延遲 return 200*i; }) .attr("transform",function(d,i){ return "translate("+20*i+","+i*20+")"; }); </script> </body> </html> ~~~ ![](https://box.kancloud.cn/2016-04-19_57161004395b6.jpg) 以上的效果需要看上一篇的內容將其中的部分代碼修改即可 ~~~ /*添加文字元素*/ var texts = svg.selectAll(".MyText") .data(dataset) .enter() .append("text") .attr("class","MyText") .attr("transform","translate("+padding.left+","+padding.top+")") //設定總體位移 .attr("x",function(d,i){ return xScale(i)-rectPadding; //設定各自水平位移 }) .attr("y",function(d){ return yScale(d); //設定各自豎直位移 }) .attr("dx",function(){ return (xScale.rangeBand() - rectPadding)/2; //各文字水平位移(這個位移是相對rect位移的) }) .attr("dy",function(d){ return -100; //各文字豎直位移 }) .attr("fill","orange") //設置為白色 .transition() .duration(1500) .ease("bounce") .delay(function(d,i){ return 100*i; }) .attr("dy",function(d){ return 20; //各文字豎直位移 }) .text(function(d){ return d; //文本顯示 }); ~~~