前言

今天要來介紹 D3.js 中第一個重要觀念： scale 以及 range ，在 D3.js 中的每個圖表都必須要設定 scale 以及 range ，今天的文章就來好好談談 scale 以及 range 的功能。

scale

scale 可以想像成比例尺的概念，比例尺就是為了讓我們能在有限的空間內顯示完整的內容，其實很多圖表都會有比例尺，像 google map 底下就會有個比例尺方便使用者進行畫面的調整。

所以在使用 D3 開始繪製圖表前我們必須要先定義圖表的比例，這樣圖表才會依照我們想要的方式顯示出來，如果不定義比例的話隨便一張圖表應該都會超過網頁能顯示的範圍了XD

D3 的比例尺有非常多的設定方式，以下會用最常用的兩種比例尺來做說明，想了解更多其他的比例尺可以參考這個網站。

• d3.scaleBand()

  非連續性的比例尺，適用於非連續性質的資料，舉例來說：性別分為男、女，兩者是沒有連續性的是獨立的這種就適用於非連續性的比例尺。

• d3.scaleLinear()

  連續性的比例尺，適用於連續性質的資料，舉例來說：時間、數值等等每個時間或數字其實都可以經過一些算法而找到彼此的關聯性，這種就是連續性的資料就適用於連續性的比例尺。

簡單小總結一下，當你的資料是無法利用一套計算方法找到彼此關聯性的，像是男生無法經由計算得到女生，這種就是非連續性的資料，反之可以利用一些計算方法找到關聯性的，像是數字與數字之間可以用減法找到關聯性，這種就是連續性的資料。

由於圖表都是以二維方式呈現，也就是擁有 x 以及 y 兩個方位，所以兩個都要設定比例尺喔！寫法會長的像下面這樣：

const x = d3.scaleBand()     // 將 x 座標的比例尺設定為非連續性的比例尺
const x = d3.scalelinear()   // 將 x 座標的比例尺設定為連續性的比例尺

const y = d3.scaleBand()     // 將 y 座標的比例尺設定為非連續性的比例尺
const y = d3.scalelinear()   // 將 y 座標的比例尺設定為連續性的比例尺

range

range 就是當我們設定完圖表比例尺後，要將這個圖表輸出至這個 range 的範圍內，至於內部的做法筆者習慣用映射的方式來思考，簡單來說我們會將輸入的資料一個一個照比例的方式對應到 range 中被切割好的範圍上，至於 range 中間是怎麼切割的我們不用理他 D3 都會幫我們處理好，中間過程長得像下面這張圖：

上面圖表看到 domain 這個東西，前面提到 range 是這個圖表的輸出範圍，既然有輸出就一定會有輸入，而 domain 就是輸入區域，關於輸入的設定筆者會在明天的文章加以細談。

通常在撰寫 range 的設定時都會用一個陣列來代表範圍， array[0] 代表範圍的起點， array[1] 代表範圍的終點，根據 x 以及 y 的不同會設定不同的起點以及終點，在 x 軸通常起點會設為 0 而終點會設為該圖表的寬度，畢竟我們在看 x 方位的時候是由左到右。而 y 軸起點則是會設定成圖表高度而終點會設定為 0 ，因為數值越高一定會在越上面，最後再補上 range 的寫法：

const x = d3.range([0, width])
const y = d3.range([height, 0])

總結

今天介紹了 scale 以及 range 這兩個相輔相成的設定，透過這兩個設定可以讓我們的圖表用最完美的比例呈現出來，所以讀者在設定圖表之前記得一定要先使用這兩個設定喔！

如果有什麼問題歡迎在下面留言給我，沒問題的話明天要來介紹另外兩個很重要的設定： domain 以及 endPoint 了。