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

Posted 2020-11-16 苍青浪

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

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

.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;
})
.attr("height",function(d){//这里要改变，即初始状态
return 0;
})
.attr("fill","blue")
.transition()//添加过渡
.duration(2000)//持续时间
.delay(function(d,i){//延迟
return i*400;
})
//.ease(d3.easeElasticInOut)//这里读者可以自己将注释去掉，看看效果（chrome浏览器会报错，但是不影响效果）
.attr("y",function(d){//回到最终状态
return yScale(d);
})
.attr("height",function(d){//回到最终状态
return height-marge.top-marge.bottom-yScale(d);
})

 

    代码说明：

        -注意上面的注释即可

    2、为文字添加过渡效果

gs.append("text")
.attr("x",function(d,i){
return xScale(i)+rectPadding/2;
})
.attr("y",function(d){
var min = yScale.domain()[0];
return yScale(min);
})
.attr("dx",function(){
(xScale.step()-rectPadding)/2;
})
.attr("dy",20)
.text(function(d){
return d;
})
.transition()
.duration(2000)
.delay(function(d,i){
return i*400;
})
//.ease(d3.easeElasticInOut)
.attr("y",function(d){
return yScale(d);
});

 

    代码说明：

        -和矩形的类似

————————————————

版权声明：本文为CSDN博主「数星星等天明」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34414916/article/details/80033730