iT邦幫忙

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

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

D3來點互動吧

最近,資料視覺化已經不單單是把圖表畫出來,常常會被要求要能夠更吸睛,最好還要好玩,所以互動性就變成了重要的一環。


on

在d3中要監聽滑鼠、鍵盤、觸控等等事件,可以使用on來達成目標

.on(DOM名稱,function)
先指定要監聽的DOM名稱,再利用匿名函式來定義事件發生後要做的事情,同樣也可以使用動畫來做一些變化

.on("mouseover",function(){
    d3.select(this)
        .transition()
        .duration(500)
        .attrTween("fill", function(d) {
          return d3.interpolateRgb(colorlinear(d),'steelblue');
        });
})
.on("mouseout",function(d){
    d3.select(this)
        .transition()
        .duration(500)
        .attrTween("fill", function(d) {
          return d3.interpolateRgb('steelblue',colorlinear(d));
        });
})

除了使用匿名函式之外,也可以像之前定義比例尺一樣在外部定義方程式後,再呼叫自訂的函式來使用

function over(){
	d3.select(this)
		.transition()
		.duration(500)
		.attrTween("fill", function(d) {
		  return d3.interpolateRgb(colorlinear(d),'steelblue');
		});
}

function out(){
	d3.select(this)
		.transition()
		.duration(500)
		.attrTween("fill", function(d) {
		  return d3.interpolateRgb('steelblue',colorlinear(d));
		});
}

定義好之後直接呼叫使用

.on("mouseover",over)
.on("mouseout",out)

這樣的好處就是可以重複使用,方便修改

Demo & code : https://codepen.io/FanWay/pen/VydEzM


上一篇
D3繼續動起來
下一篇
D3這邊可以再多一點互動嗎?
系列文
讓你資料美美的(d3.js+vue.js)30

尚未有邦友留言

立即登入留言