2016年6月22日 星期三

D3.js + AngularJS - 製作長條圖及圓餅圖動畫

今天要來結合好用的圖表工具D3.js和AngularJS來製作有動畫的長條圖和圓餅圖

範例的程式如下,相關的解釋都在寫在程式的註解中:
這裡對做點說明:

  1. 使用AngularJS的客製化directive來製做長條圖及圓餅圖,送入directive的資料跟<input>綁定。
  2. 使用svg來進行長條圖及圓餅圖的繪製。
  3. D3.js可用圖表幫助function將data包成datum,datum會包含原來的data(為傳reference的方式),並且擁有一些幫助繪圖的屬性,例如圓餅圖會用到的startAngle、endAngle。
  4. D3.js的data是使用如傳reference的方式,所以此例當AngularJS改變data時各element的data會跟著改變;但datum不是傳reference的方式,各element有自己的datum,改變parent的datum時記得手動改變下層element的datum。
  5. 在D3.js裡,select()、append會將parent的data和datum帶到下一個element。
    但selectAll()不會,要手動對下一個element呼叫data()或datum()。
  6. select()只會為呼叫者group的每一個element返回搜尋到的第一個element;而selectAll()會每呼叫者group的每一個element返回一個陣列,包含所有找到的element,其中each(function(d,i){//......});中的i為陣列的index。
  7. data()可送入一個陣列,陣列中的每一個元素會分給呼叫data()的每一個element。
    也可送入一個function,例如data(function(d,i){//....;  return [d];},在這裡d為parent的data或datum,return值為送入data()的參數。
參考資料:

  1. SVG D3.js - transition ( tween、interpolate )
  2. SVG D3.js - 直條圖 ( Bar Chart )
  3. SVG D3.js - transition 基本篇
  4. D3 on AngularJS

沒有留言 :

張貼留言