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