D3 入門概念 - 導入互動事件

Web 資料視覺化 - D3 入門概念

D3支援圖表與使用者的互動功能實作,關鍵作法是在資料萃取過程中,同時完成事件註冊設定,指定任何自訂的互動事件名稱,以下來看如何為特定元素註冊事件。
d3.select("body").append('div')
    .style({"width": "100px",
    "height": "150px",
    "background-color": "yellow",
    "margin": "10px"
    }).on('click', function () {alert('Hellow D3 !');});
這段程式碼在畫面上呈現一個藍色方塊,最後一行引用 on() 並指定第一個參數為 click ,表示註冊 click 事件,第二個函式物件參數表示當使用者點擊此方塊即時回應其中的訊息。 



相同的原理,可以直接套用於由資料動態產生的元素中,考慮以下的陣列:
var datainfo = [120, 480, 226, 568, 230, 186, 45, 256, 390]; 
利用這個陣列產生由div元素構成的水平長條圖,所需的程式碼如下:
d3.select("body").selectAll('div')
    .data(datainfo).enter()
    .append('div').style({
    "background-color":'blue' , 
    "width": function (d) { return d + 'px'; },
    "height": '24px'  
    }).on('click', function (d) { alert('資料值:'+d); });
如前述說明,於最後引用 on() 註冊click事件,並且於回呼函式中回傳此筆資料所屬的內容資料。



 現在點擊任一長條,則會顯示此長條所展示的資料說明訊息。

 D3 完全整合 JavaScript 語法, 因此只要熟悉 JavaScript ,運用原生 JavaScript 語法很快便能上手建構需要的資料圖表。




沒有留言: