D3 SVG 元件
SVG (Scalable Vector Graphics) 是一種在網頁上呈現圖像的方法。 SVG 不是直接圖像，而是使用文本創建圖像的方法。它會根據瀏覽器的大小自行縮放，因此調整瀏覽器的大小不會使圖像失真，並提供繪製不同形狀，如線條、矩形、圓形、橢圓等。
💥 What is SVG？
SVG 是一種基於文本的圖像
SVG 在結構上類似於 HTML
SVG 位於 DOM 中
SVG 屬性可以指定為屬性
SVG 應該具有相對於原點的絕對位置 (0, 0)
開始學習 SVG 元素前，先看下方的範例，可以看到 SVG 元素被包在<svg> tag 裡面。
✒️ 線 Line
以<line>表示，下方為 HTML 中的寫法：<line x1="15" y1="15" x2="200" y2="50" />x1：第一個點的 x 坐標
y1：第一個點的 y 坐標
x2：第二個點的 x 坐標
y2：第二個點的 y 坐標
畫布是從左上方開始做計算的！
新增 js 檔案，並做好相關檔案配置，再輸入下方程式碼：
輸入完將原本 HTML 檔案中<svg> 整個區塊移除，此時開啟瀏覽器仍會得到一模一樣的作圖。
✒️ 矩形 Rectangle
以<rect>表示，下方為 HTML 中的寫法：<rect x="0" y="0" width="200" height="200"></rect>x：矩形左上角的 x 坐標
y：矩形左上角的 y 坐標
width：矩形的寬度
height：矩形的高度
將上方寫法改置於 js 檔案中，程式碼如下：
開啟瀏覽器，可以看到一個矩形(長100px，寬200px)
✒️ 圓形 Circle
以<circle>表示，下方為 HTML 中的寫法：<circle cx="250" cy="25" r="25"/>cx：圓心的 x 坐標
cy：圓心的y坐標
r：圓的半徑
將上方寫法改置於 js 檔案中，程式碼如下：
開啟瀏覽器，可以看到一個圓形(半徑50px)
✒️ 橢圓 Ellipse
以<ellipse>表示，下方為 HTML 中的寫法：<ellipse cx="250" cy="25" rx="100" ry="25"/>cx：圓心的 x 坐標
cy：圓心的y坐標
rx：圓的 x 半徑
ry：圓的 y 半徑
將上方寫法改置於 js 檔案中，程式碼如下：
開啟瀏覽器，可以看到一個橢圓形 👀
🔧 制定 SVG 元件樣式
fill
元素的填充顏色，可以是顏色名稱、十六進制值或 RGB 或 RGBA 值
stroke
筆觸顏色，可以是顏色名稱、十六進制值或 RGB 或 RGBA 值
stroke-width
筆觸寬度指定我們的線條或邊界的寬度(以像素為單位)
opacity
指定一個不透明度/透明度數字(0 是完全透明，1 是完全不透明)
font-family
對於文本元素，用法與 CSS 一樣
font-size
指定文本元素的字體大小
D3 SVG 圖表
運用上方的 SVG 元素以及 <text>繪製圖表，進到 D3 SVG 範例之前，先看純 HTML 搭配 CSS的寫法。
📍 SVG 圖表(不採用 D3 寫法)
建立一個新的 HTML 檔案，並加上下方程式碼：
開啟瀏覽器，可以看到上方 SVG 長條圖。
查看上方程式碼，有三個<g>標籤，g 代表 group 的縮寫。由於 SVG 採用相對於原點的絕對位置， (0, 0) 從屏幕左上角開始計算。為了讓三個 bar 不重疊呈現，故加上 transform="translate(0,xx)"做調整。
📍 SVG 圖表(採用 D3 寫法)
若將上方範例，改用 D3.js 寫法。
此時 HTML 檔案如下：
js 檔案程式碼如下：
最上方 data array 定義資料內容，因為資料值偏小故用 scaleFactor 輔助，
讓呈現出來的資料便於閱讀。graph 部分設定 svg 的大小，由於長條圖長橫的，高度設定為 bar 資料長度。
往下 bar 部分，設定<g>標籤，為了讓三個 bar 不重疊呈現，所以加上 transform="translate(0,xx)"做調整，function(d,i) d 代表資料，i 代表 index。設定好要繪製的位置，接著繪製<rect>，其中 height 設定的 -1 是作為 margin 用途。最後標上<text>，style text-anchor:end 將 x 位置設定靠齊 bar 的最右方，y 的部分則是 bar 高度的一半，dy 設定 y 的邊界偏移量。
D3 刻度 & 軸 (Scales & Axes)
D3 Scales
有些數據的值太大或太小，不便於直接呈現在圖表中，D3 Scales 可以協助縮放單位，讓資料視覺映射有較好的呈現。
在進到 scale 之前，必須先認識 Domain & Range。
Domain：表示輸入數據的最小值和最大值。
E.g. arr=[100, 400, 300, 900, 850, 1000] ，100 是最小值，1000 是最大值。Range：範圍是使用者期望輸入值映射到的輸出範圍。
E.g. 想在 500px 像素寬度呈現最大值 1000，縮放因子即為 0.5。
d3.scaleLinear() 常見的 scale 輔助工具
d3.scaleLinear() 舉例說明假設有筆資料 data =[100, 400, 300, 900, 850, 1000]，使用d3.scaleLinear() 如下：
若輸入 400，則會對應到 200。其中的 domain 可以使用 d3.min() & d3.max() 取得，修改如下：
完整 D3 Scale 範例如下：
開啟瀏覽器，畫面如下：
🔖 補充說明
d3.scaleBand() 非連續性的比例尺，適用於非連續性質的資料。
d3.scaleLinear() 連續性的比例尺，適用於連續性質的資料。詳細 D3 Scale 資料可以參閱說明 🔍
D3 Axes
繪製圖表軸線，需設定 x & y。
d3.axisTop()創建頂部水平軸d3.axisRight()
創建垂直向右的軸d3.axisBottom()
創建底部水平軸d3.axisLeft()
創建垂直向左的軸
詳細範例如下：
成果如上圖所示。詳細 D3 Axes 資料可以參閱說明 🔍
