【D3.js學習總結】6、D3比例尺

概念

比例尺是一組把輸入域對映為輸出範圍的函式，它將真實值跟實際顯示值做了一個對映，
在之前的例子中，我們已經用到了線性比例尺；

var _x = d3.scale.linear().domain([0,10]).range([0,100])

它的意思是將0-10之間的輸入域以線性的方式對映到0-100的輸出範圍上，也就是說傳入的值為10，顯示的時候顯示為100；

_x(0); // 返回0
_x(5); // 返回50
_x(10); // 返回100

常用方法

_x.nice()

告訴比例尺取得為range() 設定的任何值域，把兩端的值擴充套件到最接近的數，比如，值域[0.20147987687960267, 0.996679553296417]的擴充套件值域為[0.2, 1]，這個方法對正常人都有用，因為人不是計算機，看到0.20147987687960267 這樣的數你一定會頭大。

_x.rangeRound()

用rangeRound() 代替range() 後，則比例尺輸出的所有值都會舍入到最接近的整數值，對輸出值取整有利於圖形對應精確的畫素值，避免邊緣出現模糊不清的鋸齒。

_x.clamp()

預設情況下，線性比例尺可以返回指定範圍之外的值。例如，假如給定的值位於輸入值域之外，那麼比例尺也會返回一個位於輸出範圍之外的值。不過，在比例尺上呼叫clamp(true) 後，就可以強制所有輸出值都位於指定的範圍內。這意味著超出範圍的值，會被取整到範圍的最低值或最高值（總之是最接近的那個值）。

其它比例尺：

d3.scale.linear – 線性比例尺

將輸入域值按線性等比的方式分隔作為輸出範圍

示例：d3.scale.linear().domain([0,100]).range([0,700])
應用場景：按比例、成直線的展現或者規則、光滑的運動

d3.scale.identity – 線性恆等比例尺

線性恆等比例尺是線性比例尺的特殊型別，實現輸入域與輸出範圍 1:1 的縮放，其方法都是恆等函式

示例：d3.scale.identity().domain([0,100])
應用場景：在處理畫素座標時有用，輸入值是多少畫素，在輸出顯示時也是多少畫素

d3.scale.quantize – 量化比例尺

量化比例尺是線性比例尺的變體，輸入的域是連續的，使用離散的range，輸入資料被分割成不同的片段，也即是分類，如10個人按設定的年齡分類。

示例：d3.scale.quantize().domain([0,10]).range([0,10,20,30,40,50,60,70]);
應用場景：想把資料分類的情形（！還沒想到最適合的業務場景）

var quantize = d3.scale.quantize().domain([0,10]).range([0,10,20,30,40,50,60,70]);
quantize(0) ==> 0
quantize(1) ==> 0
quantize(2) ==> 10
quantize(3) ==> 20
quantize(4) ==> 30
quantize(5) ==> 40
quantize(6) ==> 40
quantize(7) ==> 50
quantize(8) ==> 60
quantize(9) ==> 70
quantize(10) ==> 70

d3.scale.quantile – 分位數比例尺

分位數比例尺是線性比例尺的變體，無論輸入資料怎麼分佈，都會被對映成離散值

示例：d3.scale.quantile().domain([0,10,20,30,40,50,60,70]).range([0,100,200,300,400,500,700]);
應用場景：已經對資料分類的情形（！似懂非懂，需要繼續研究）

d3.scale.log – 對數比例尺

對數比例尺與線性比例尺相似，區別是對數比例尺首先對輸入資料進行對數變換 。

示例：d3.scale.log().domain([1,100]).range([0,700]).base(2);
應用場景：輸入值以對數級變化的資料集（！不太熟悉對數，需要繼續研究）

d3.scale.pow – 指數比例尺

指數比例尺與線性比例尺相似，區別是pow比例尺首先對輸入資料進行指數變換，預設指數為1，所以預設情況下也是數值 1:1 的縮放。

示例：d3.scale.pow().domain([0,100]).range([0,700]).exponent(2);
應用場景：輸入值以指數級變化的資料集

d3.scale.sqrt – 平方根比例尺

平方根比例尺是pow比例尺的特殊型別，相當於 d3.scale.pow().exponent(0.5)

示例：d3.scale.sqrt().domain([0,100]).range([0,700])
應用場景：輸入值以平方根變化的資料集

d3.scale.threshold – 臨界值比例尺

臨界值比例尺與量化比例尺類似，不過允許將任意的子集對映到離散的range。

示例：d3.scale.threshold().domain([0,1,2,3,4,5,6,7]).range([0,0,100,200,300,400,500,600,700]);
應用場景：暫不清楚（！還沒完全明白，需要繼續研究）

d3.scale.ordinal – 序數比例尺

使用非定量值（如類名）作為輸出的序數比例尺

示例：d3.scale.ordinal().domain([“A”, “B”, “C”, “D”, “E”, “F”, “G”, “H”]) .range([0,100,200,300,400,500,600,700]);
應用場景：輸入值與轉出值需要一一對應的場景

d3.scale.category10()

構造一個新的顏色序數比例尺，使用10種型別的顏色：

#1f77b4 #ff7f0e #2ca02c #d62728 #9467bd #8c564b #e377c2 #7f7f7f #bcbd22 #17becf

d3.scale.category20()

構造一個新的顏色序數比例尺，使用20種型別的顏色：

#1f77b4 #aec7e8 #ff7f0e #ffbb78 #2ca02c #98df8a #d62728 #ff9896 #9467bd #c5b0d5 #8c564b #c49c94 #e377c2 #f7b6d2 #7f7f7f #c7c7c7 #bcbd22 #dbdb8d #17becf #9edae5

d3.scale.category20b()

構造一個新的顏色序數比例尺，使用20種型別的顏色：

#393b79 #5254a3 #6b6ecf #9c9ede #637939 #8ca252 #b5cf6b #cedb9c #8c6d31 #bd9e39 #e7ba52 #e7cb94 #843c39 #ad494a #d6616b #e7969c #7b4173 #a55194 #ce6dbd #de9ed6

d3.scale.category20c()

構造一個新的顏色序數比例尺，使用20種型別的顏色：

#3182bd #6baed6 #9ecae1 #c6dbef #e6550d #fd8d3c #fdae6b #fdd0a2 #31a354 #74c476 #a1d99b #c7e9c0 #756bb1 #9e9ac8 #bcbddc #dadaeb #636363 #969696 #bdbdbd #d9d9d9 

d3.time.scale – 日期和時間值比例尺

將日期和時間對映到具體的數值

示例：d3.time.scale().domain([new Date(`2015-1-1`), new Date(`2016-12-1`)]).range([0,700]).nice();
應用場景：對日期刻度作特殊處理的場景

檢視線上示例