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

2016年6月8日 星期三

AngularJS - 自製跟ng-repeat一樣能力的directive (my-repeat)

在這篇文中,我們要來製作一個跟AngularJS的ng-repeat有幾乎相同能力的自製directive(當然ng-repeat更完整,有更多的可用變數、接受表達示等)。

我們先定義出自製directive要擁有的能力,在這裡我們取名我們的directive叫作my-repeat:
  1. 使用型式如同ng-repeat,可用attribute的型式放在html element tag的attribute中使用。
  2. 其中,屬性裡面可以用 "XX in YYY" 這種型式的表達示來表示要對哪個array型式(YYY)的內部資料(XX)做迴圈。
  3. 在directive中,可以解析YYY中的XX來顯示資料,也可解析其他資料,例如controller中的變數。
  4. 能夠使用 "-start" 和 "-end" 的multiElement的用法。
  5. 此directive要可以嵌套到另一個directive中(其他的directive或自己)。

下面就是實現出的程式碼,可以在Result看到,我們的my-repeat擁有和ng-repeat相同的上述能力。(**有使用jQuery做$(element)和before()的動作)


在程式碼中已經寫了詳細的註解,不過我們還必須對執行完上述程式碼後,AngularJS產生出了什麼樣的Scope關係。
在程式碼裡,我們已經在有scope出現的地方進行了console.log()的輸出,可以由其中的屬性物件、$id、_proto_了解到scope之間的關係,以下已經用簡單圖示來表示從console.log()結果中看出的關係: