iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 21
0
Data Technology

讓你資料美美的(d3.js+vue.js)系列 第 21

D3動起來

CSS有transition可以完成簡單的動畫
D3也有transition,而且比CSS的控制要簡單一些,功能強大一些,可以加入更多自己想要的效果
來將之前的長條圖加上一些動畫,並且做一些簡單的練習


首先先定義一開始的狀態(位置、形狀、顏色等等)

.attr("y",0)
.attr("height",0)

然後開始定義動畫
先呼叫d3中的transition來啟動動畫
.transition()
在後方放入自己要的功能

  • delay : 用來延遲動畫開始的時間
  • duration : 用來定義動畫所需的時間
  • ease : 用來選擇物件出現的方式

在D3之中,這些功能都可以加入匿名函數來對每個物件作彈性的規劃
加完功能之後,要定義最後要去到的位置或是變成的狀態

    .attr("y",function(d){
    	return 500-linear(d);
	})
    .attr("height",function(d){
         return linear(d);
	});

定義給rect的動畫

bar.append("rect")
    .attr("y",0) //起始位置
	.transition()
	.delay(function(d,i){
    	return i * 200;
	})
	.duration(2000)
	.ease(d3.easeBounce)
	.attr("y",function(d){
    	return 500-linear(d);
	})
	.attr("height",function(d){
         return linear(d);
	});

定義給text的動畫

bar.append('text')
	.attr('y',-50)
	.attr("x",function(d,i){
         return xlinear(i)+27;
    })
	.transition()
	.delay(function(d,i){
    	return i * 250;
	})
	.duration(2000)
	.ease(d3.easeBounce)
	.attr("y",function(d){
		return 500-linear(d)-5;
	});

demo&code : https://codepen.io/FanWay/pen/ZvxXVJ


上一篇
D3長條圖的最後一步
下一篇
D3繼續動起來
系列文
讓你資料美美的(d3.js+vue.js)30

尚未有邦友留言

立即登入留言