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

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

.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


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

D3.js的v5版本入门教程(第九章)——完整的柱状图知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。