前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>