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