由於愛料理網站用了很多技術和服務，
是我不清楚的，
在上次筆記的過程中，有很多不明白的地方。

請教朋友之後，他建議我每天學習一到兩個，然後內容寫深入一點，
並盡量使用自己閱讀後，消化過的文字，
這樣我也會比較能夠理解。

假日我會再找時間，將上一篇分享內容做修改。

iCook使用d3.js，將相關數據繪製成圖表，呈現在後台供營運人員查看、互動。

今天來介紹d3.js。
一個優秀的圖表，可以讓數據一目了然。
iCook使用d3.js，將相關數據繪製成圖表，呈現在後台供營運人員查看、互動。

什麼是D3?

D3 是 Data-Driven Documents ，數據驅動文件。
D3 通过使用 HTML、SVG 和 CSS在網頁上展示你的數據。

什麼是SVG?

SVG提供全分辨率的圖形元素：不管什麼大小的屏幕，縮放比例或分辨率都能夠正常顯示。

*分辨率=解析度,圖像的精細程度。
*全分辨率=和顯示器顯示的像素數量是一致的，使每一個像素都得到完全的顯示。

直到SVG出現之前，我們只能通過CSS和文本渲染看到清晰的元素樣式。

*文本= 目標。

文本是目標
文章是作法
目標對每個人都不一樣
作者要賺錢，讀者要得到知識 之類的。

*渲染= Rendering。

『所謂的 Rendering , 在中文裡一直沒有一個正式的名稱 ,
在台灣早期就直接使用英文 , 而對岸則常用 " 渲染 " 這個名詞
其實也沒有那麼難理解 , 就是擺好模型 , 架好燈光 , 上好材質 , 然後按下 Render 按鈕
軟體就會依照你設定的結果計算出一張圖 , 其實 Render 可以當動詞也可以當名詞
我們常說 Render 中或是要開始 Render ,
其實就是指電腦正在計算中或是要按下 Render 按鈕這一個動作
當然我們做好之後的結果 , 也可以稱作 Render , 或是 Rendering
Render 可以解釋成 " 經過計算後所呈現的結果 "』

*文本渲染= 用程式去呈現畫面，達到觀者期望的目標。

在SVG裡不需要使用div和:after元素來創建簡單的形狀和其他效果。
SVG可以創造各種向量形狀。

了解SVG-
http://blog.csdn.net/hfahe/article/details/7661494

D3.js是javascript library之一。

參考資料:

全分辨率顯示
http://baike.baidu.com/view/1607807.htm

「文本」是什麼？
http://tw.myblog.yahoo.com/jw!w2hXdkWfEQUeAf_fMMYH3Q--/article?mid=4
(但我覺得此篇還是有點抽象><，所以上方用自己的話去解釋。)

3D 軟體 Rendering 的心得
http://tw.myblog.yahoo.com/lee66940-muto/article?mid=228

d3.js: 3個小圓圈的故事 http://heikezhi.com/2011/07/10/d3-js-three-little-circles/

用d3.js來實現簡單的網絡拓撲 http://www.cnblogs.com/flyingzl/articles/2469351.html

d3.js的demo
http://mbostock.github.com/d3/tutorial/circle.html
http://bl.ocks.org/1136236
http://mbostock.github.com/d3/talk/20111116/bundle.html
http://bost.ocks.org/mike/d3/workshop/
http://jsfiddle.net/jcutrell/unFyq/1/
http://jsfiddle.net/jcutrell/3C9JW/5/

介紹d3.js http://www.open-open.com/ajax/ajax20110331164923.htm

主頁:http://mbostock.github.com/d3/

下載:http://mbostock.github.com/d3/

範例:http://mbostock.github.com/d3/

補充:
Flotr2 - 我最喜歡的 Javascript 圖形庫
http://log4d.com/2012/06/flotr2/

備註:

由於還在學習階段，
我的筆記大部分都是尋找資料、引用專業內容，
不過有些為了讓自己更好吸收，會自我理解之後、寫出一些結論或心得。

若有不完善或不正確的地方，再請各位大大鞭大力一點，多多指教阿！

感謝！