码迷,mamicode.com
首页 > Web开发 > 详细

D3.js的v5版本入门教程(第十章)

时间:2019-09-29 19:39:37      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:浏览器   基础知识   end   domain   padding   cti   这一   color   width   

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

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

.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

D3.js的v5版本入门教程(第十章)

标签:浏览器   基础知识   end   domain   padding   cti   这一   color   width   

原文地址:https://www.cnblogs.com/cangqinglang/p/11609413.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!