D3.js的v5版本入门教程（第十章）——让图表动起来

D3.js的v5版本入门教程（第十章）

    在这一章我们干点有趣的事——让我们上一章绘制的图表动起来，这样岂不是很有意思

    为了让图表动起来，我们还是需要以下新的知识点

• .attr(xxx) .transition() .attr(xxx)，transition()表示添加过渡，也就是从前一个属性过渡到后一个属性
• .duration(2000)，表示过渡时间持续2秒
• .delay(500)，表示延迟0.4秒后再进行过渡
• .ease(d3.easeElasticInOut)表示过渡方式，注意这里和v3版本的区别

    有了上面的基础知识后，现在我们来实现动态图表

    1、为矩形添加过渡效果

gs.append("rect")
    		.attr("x",function(d,i){
    			return xScale(i)+rectPadding/2;
    		})	
    		.attr("y",function(d){//这里是要改变的，即初始状态
    			var min = yScale.domain()[0];
    			return yScale(min);//可以得知，这里返回的是最大值
    		})
    		.attr("width",function(){
    			return xScale.step()-rectPadding;