天天看點

【D3.js 學習總結】21、D3互動事件

【D3.js 學習總結】21、D3互動事件

前20節中,我們講了各種靜态d3圖表的制作,好的圖表應該是要與使用者進行互動的,這節來講講d3的互動事件;

selection選擇器事件監聽的寫法跟平時我們用的jquery類似,如:

selection.on(‘click’,function(d,i){

})

但請注意,點選事件觸發的匿名函數參數不是我們常用的e或event,而是綁定在選擇器上的資料d和資料的序列号i,這點非常重要。

我們隻要調用全局對象<code>d3.event</code>,它是dom事件,并實作了标準事件字段,像時間戳timestamp和鍵代碼keycode,以及preventdefault()方法和的stoppropagation()方法。當然你可以使用原生事件的pagex and pagey;

在後面的線上示例中我們是這樣使用d3.event的

注意:通過直接調用d.r可以取到目前選擇器上綁定的半徑資料;

給選擇的元素重複注冊事件監聽,新的事件被替換之前注冊的事件。為注冊多個監聽器,可以跟一個可選的命名空間,如“click.foo”和“click.bar”。

要删除事件監聽器,隻需要傳遞null給listener,如示例中的如下代碼:

通過使用全局方法d3.mouse可以友善的擷取到目前事件對象的x/y坐标值,container為原生dom對象;

拖動行為,通過監聽拖拽事件控制svg的互動行為,以下代碼出自最後面的示例;

縮放行為,通過監聽縮放事件控制svg的互動行為,以下代碼出自最後面的示例;

<a href="http://gafish.github.com/demo/d3/event.html">檢視線上示範</a>

繼續閱讀