# D3.js --- ``` D3.js 是一個操縱SVG向量圖形的視覺化框架， D3 提供了各種簡單易用的函數，大大簡化了JavaScript操作數據的難度。 由於它本質上是JavaScript ，所以用JavaScript也是可以實現所有功能的， D3 所做的事就是減輕你的工作量，以及使你的代碼十分簡單易懂， 在數據可視化方面D3 已經將生成可視化的複雜步驟精簡到了幾個簡單的函數， 你只需要輸入幾個簡單的數據，就能夠轉換為各種圖形。 ``` --- [4, 32, 15, 16, 42, 25] ---  --- #### D3操作   --- #### 串鍊  --- #### 資料綁定   ``` D3 讓我們在使用各個方法裡面， 都可以利用一個匿名函數的 function 來獲取存在背景的資料， 而這些資料會依序放在 function 的第一個變數裡面， 因此 return d 就可以依序返回該有的數值 ``` --- ### SVG --- ``` 簡略的技術定義： SVG 是可縮放向量圖形 (Scalable Vector Graphics)的縮寫。 它是一種圖形格式，就像JPEG 或 PDF，它們的特色就是不被限制於某種解析度。 這是因為 SVG 以向量圖形組成，而不是像素。 ```  --- #### 少少的檔案大小 ###### 在大多數的情況下SVG佔用的容量比PNG或JPEG少非常多  ###### 如果是GIF，這幅動畫會超過400KB，但是SVG只要3KB ---   ---   --- #### 圖層( Layer )    --- #### 範例 https://codepen.io/wer810207/pen/zYYoeNM?editors=0010 --- #### 參考 SVG參考手冊 - https://www.runoob.com/svg/svg-reference.html D3.js API - https://github.com/d3/d3/blob/master/API.md D3.js china map - https://bl.ocks.org/abrahamdu/d464fd5f7d831b8ec2db4865be8b2933 ---