前言

今天的文章跟昨天的內容基本上差不多，今天要來講講 D3 是如何處理數字格式，其實數字是不需要經由 D3 去轉換也可以直接使用 d3.scaleLinear() ，之所以今天的文章還要介紹 D3 用來處理數字格式的 API 就是為了方便大家在數值的格式顯示可以用最少的力氣達到想要的結果，廢話不多說馬上開始吧！

number format

接下來要介紹的 API 跟昨天的 d3.timeFormat() 一樣都是適用在 Axis 的時候，至於 Axis 是什麼筆者在之後的文章會提到，這邊讀者們稍微有個印象就好。

今天要介紹的是： d3.format() 這個 API ，跟 d3.timeFormat() 以及 d3.timeParse() 一樣也會回傳一個 function ，同時 d3.format() 也可以帶很多參數，筆者這邊列出幾個最常使用的參數，想了解更多參數可以參考這個網站。

大家看完上面的參數後可能會覺得有點霧煞煞，接下來就用幾個範例帶大家看經由這些參數轉換後的結果吧！

const eFormat = d3.format('e')
const gFormat = d3.format('3g')
const fFormat = d3.format('.3f')
const dFormat = d3.format('d')
const rFormat = d3.format('r')
const percentFormat = d3.format('%')
const pFormat = d3.format('p')
const bFormat = d3.format('b')
const oFormat = d3.format('o')
const xFormat = d3.format('x')
const XFormat = d3.format('X')
const cFormat = d3.format('c')
const sFormat = d3.format('s')

const originNumber = 12345

console.log(eFormat(originNumber))          // 1.234500e+4
console.log(gFormat(originNumber))          // 12345.0
console.log(fFormat(originNumber))          // 12345.000
console.log(dFormat(originNumber))          // 12345
console.log(rFormat(originNumber))          // 12345.0
console.log(percentFormat(originNumber))    // 1234500.000000%
console.log(pFormat(originNumber))          // 1234500%
console.log(bFormat(originNumber))          // 11000000111001
console.log(oFormat(originNumber))          // 30071
console.log(xFormat(originNumber))          // 3039
console.log(XFormat(originNumber))          // 3039
console.log(cFormat(originNumber))          // 12345
console.log(sFormat(originNumber))          // 12.3450k

看到上面的結果後相信讀者心中一定會有個疑問，有些結果後面真的太多 0 了，有沒有辦法可以一鍵刪除沒有用處的 0 ，其實 D3 也幫你想好了，只要在參數前面加個 ~ 就可以刪掉那些多餘的 0 了，不過這個 ~ 只適用在 e 、 r 、 % 以及 s 這四種參數上喔！

const eFormat = d3.format('~e')
const rFormat = d3.format('~r')
const percentFormat = d3.format('~%')
const sFormat = d3.format('~s')

const originNumber = 12345

console.log(eFormat(originNumber))          // 1.2345e+4
console.log(rFormat(originNumber))          // 12345
console.log(percentFormat(originNumber))    // 1234500%
console.log(sFormat(originNumber))          // 12.345k

溫馨小提醒：經由 d3.format() 轉換後的數值，其型態會是字串而非原本的數字，所以千萬不要把轉換過的數值丟進 domain 中喔！這樣就不能使用 d3.scaleLinear() 這個連續比例尺了，讀者要特別注意喔！

總結

今天的文章相對於之前的內容是比較輕鬆的，有了前幾天的觀念之後相信大家在看今天的文章一定會覺得輕鬆很多，學會這些 API 後，未來在繪製任何跟數字有關的圖表就一定難不倒各位了。

如果對於文章內容有任何疑問歡迎在下面留言給我，沒問題的話明天就要開始進行圖表的繪製瞜！