1、d3.scaleTime()時間比例尺

　　應用場景：常用於折線圖時間軸刻度

　　

const myScale = d3.scaleTime()
    .domain([new Date(2017, 0, 1, 0), new Date(2017, 0, 1, 2)])
    .range([0,100]);

console.log(myScale(new Date(2017, 0, 1, 0)) ) // 0
console.log(myScale(new Date(2017, 0, 1, 1)) ) // 50

2. d3.scaleLinear() 線性比例尺

　　應用場景：數量統計圖數量顯示刻度

　　domain()

是輸入域，range()是輸出域，相當於將domain中的資料集對映到range的資料集中。

const myScale = d3.scaleLinear().domain([1,5]).range([0,100])


console.log(myScale(1)) // 0
console.log(myScale(3)) // 50
console.log(myScale(5)) // 100

// 如果採用domain之外的數字

　console.log(myScale(-2)) // -75 console.log(myScale(7)) // 150 　// 所以domain只代表定義一個對映規則而不限於此輸入域

3. d3.scaleBand() 序數比例尺

　　應用場景：定義域和值域是不連續的，都是離散的。例如：一些柱狀統計圖

const myScale = d3.scaleBand().domain([1,4,10]).range([0,100])

console.log(myScale(1)) // 0
console.log(myScale(3)) // undefined
console.log(myScale(4)) // 33.333333333333336
console.log(myScale(12)) // undefined

　　其中myScale只會輸出domain陣列中存在的資料，其他不存在的都返回undefined

4. d3.scaleOrdinal() 序數比例尺

　　應用場景：定義域和值域是不連續的，都是離散的。例如：一些柱狀統計圖

　　

const myScale = d3.scaleOrdinal().domain(['jack', 'rose', 'john']).range([10, 20, 30])

　console.log(myScale('lalal')) //10 console.log(myScale('rose')) // 20 console.log(myScale('lalal')) // 10 console.log(myScale('lalal2')) // 20 console.log(myScale('lalal3')) // 30 console.log(myScale('lalal4')) // 10 console.log(myScale(0)) // 20 console.log(myScale(1)) // 30 console.log(myScale(2)) // 10 console.log(myScale(3)) // 20 console.log(myScale(4)) // 30 console.log(myScale(5)) // 10 console.log(myScale(6)) // 20 console.log(myScale(7)) // 30 console.log(myScale(8)) // 10 console.log(myScale(20)) // 20 console.log(myScale(50)) // 30 console.log(myScale(-7)) console.log(myScale(1))

　　為了搞清楚scaleOrdinal，分別從存在於domian陣列中和不存在此陣列中兩種方式來解釋：

　　①存在於domain陣列中時：會取出range中對應的值；

　　②不存在domain陣列中時：會按照順序去迴圈匹配range中的值，如果是數字，會按照數字的順序去迴圈匹配range中的值，如果數字不連續，也會把不連續的數字進行匹配。

5. d3.scaleQuantize() 量化比例尺

const myScale = d3.scaleQuantize().domain([1, 10]).range([10, 20, 30, 40])
    
console.log(myScale('lalal')) // 40
console.log(myScale('rose')) // 40
console.log(myScale('lalal')) // 40
console.log(myScale('lalal2')) // 40
console.log(myScale('lalal3')) // 40
console.log(myScale('lalal4')) // 40
console.log(myScale(0)) // 10
console.log(myScale(1)) // 10
console.log(myScale(2)) // 10
console.log(myScale(3)) // 10
console.log(myScale(4)) // 20
console.log(myScale(5)) // 20
console.log(myScale(6)) // 30
console.log(myScale(7)) // 30
console.log(myScale(8)) // 40
console.log(myScale(20)) // 40
console.log(myScale(50)) // 40
console.log(myScale(-7)) // 10
console.log(myScale(1)) // 10

　　此domain的陣列會按照range的陣列個數進行分配，如：

　　1,2,3 => 10

　　4,5=> 20

　　6,7 => 30

　　8,9,10 => 40

　　小於1 返回10，大於10返回40