交互式數據可視化－D3.js（三）比例尺

線性比例尺

線性比例尺是經常使用比例尺經常使用方法有：

var linear = d3.scaleLinear() - 建立一個定量的線性比例尺.

linear.domain([numbers]) - 定義或獲取定義域

linear.range([values]) - 定義或獲取值域

linear(x) - 輸入一個定義域內的值，返回一個值域的值

linear.invert(y) - 輸入一個值域的值，返回一個定義域的值

linear.rangeRound([values]) - 代替range(), 比例尺的輸出值會進行四捨五入返回整型

linear.clamp([boolean]) - 默認flase，當比例尺接受一個超出定義域範圍的值當時候，依然可以按照一樣的計算方法獲得一個值，這個值是超出值域範圍的。設置爲true，則全部超出值域範圍的值，都會被收縮到值域以內。

linear.nice([count]) - 將定義域的值擴展成比較理想的值並不是四捨五入

linear.ticks([count]) - 設定或獲取座標軸刻度

大體的使用形式:

var linear = d3.scaleLinear().domain([0, 90]).rangeRound([0, 100]).clamp(true);
console.log(linear(95));  // 100
console.log(linear.nice().ticks(9)); //[0, 10, 20, 30, 40, 50, 60, 70, 80, 90]
console.log(linear.range()); //[0, 100]

指數，量子，閾值比例尺

比例尺中不少方法都是相同的，例如domain(), range(), invert()等，名稱和做用都是相同的，下面指出一些不一樣的地方。

指數比例尺

相對線性比例尺多出一個exponent()用於指定指數。使用方法以下：

var pow = d3.scalePow().exponent(3).domain([0, 3]).rangeRound([0, 90]);
console.log(pow(2)); //27

指數爲3，輸入爲2。這段代碼中至關於定義一個線性比例尺。定義域爲[0, 27], 值域爲[0, 90]，當計算2的3次方獲得的結果爲8，在對這個結果應用線性比例尺，最終到27，驗證着一點，請看以下代碼：

var pow = d3.scalePow().exponent(3).domain([0, 3]).rangeRound([0, 90]);
var linear = d3.scaleLinear().domain([0, Math.pow(3, 3)]).rangeRound([0, 90]);
console.log(pow(2)); //27
console.log(linear(Math.pow(2, 3))); //27

量子比例尺

量子比例尺定義域是連續的。值域是離散的，結果是對應的離散值。

var quantize = d3.scaleQuantize().domain([0, 10]).range(['a', 'b', 'c', 'd', 'e']);
console.log(quantize(1)) //a
console.log(quantize(4.1)) //c

使用量子比例尺後定義域將被分紅[0, 2],[2, 4],[4, 6],[6, 8],[8, 10]這5段，分別對應值域的5個值。量子比例尺很是適合處理‘數值對應顏色’的問題

閾值比例尺

閾值比例尺和量子比例尺相似，閾值比例尺是將連續的定義域映射到離散的值域裏。

var threshold = d3.scaleThreshold().domain([0, 2, 4, 6, 8]).range(['a', 'b', 'c', 'd', 'e']);
console.log(threshold(3)) //c
console.log(threshold.invertExtent('b')) // [0, 2]

量子和閾值十分類似，都是將連續的定義域映射到離散的值域裏。

序數比例尺

序數比例尺

序數比例尺的定義域和值域都是離散的，經過輸入一些離散的值(如名稱，序號，ID號等)，要獲得另外一些離散的值(如顏色，頭銜等)，這時就要考慮序數比例尺。經常使用方法有:

var ordinal = d3. scaleOrdinal() - 建立一個序數比例尺.

ordinal(x) - 根據輸入值計算對應的輸出值.

ordinal.domain([values]) - 設置輸入範圍.

ordinal.range([values]) - 設置輸出範圍.

ordinal.unknown([values]) - 設置未知輸入的輸出值.
大體的使用形式:

var ordinal = d3.scaleOrdinal().domain(['a', 'b', 'c', 'd', 'e']).range([0, 2, 4, 6, 8]).unknown('超出輸入範圍');
console.log(ordinal('a')) // 0
console.log(ordinal('g')) // 超出輸入範圍

座標軸

座標軸組件能夠將scales顯示爲人類友好的刻度標尺參考，減輕了在可視化中的視覺任務。座標軸相關的經常使用方法以下。
d3.axisLeft(linear) - 使用給定的 scale 構建一個刻度在左的座標軸生成器

d3.axisBottom(linear) - 使用給定的 scale 構建一個刻度在下的座標軸生成器

d3.axisRight(linear) - 使用給定的 scale 構建一個刻度在右的座標軸生成器

d3.axisTop(linear) - 使用給定的 scale 構建一個刻度在上的座標軸生成器

axis.ticks([argument...]) - 設定或獲取座標軸的分割數。

axis.tickValues([argument...]) - 指定 values 數組，則使用指定的數組做爲刻度而不是自動計算刻度

axis.tickPadding([padding]) - 設置刻度和刻度文本之間的間距

大體的使用形式:

var linear = d3.scaleLinear().domain([1000, 0]).rangeRound([0, 250])
var axisLeft = d3.axisLeft(linear).ticks(4);
var svg = d3.select('#axis').append('svg').attr('width', '400').attr('height', '300');
var gLeft = svg.append("g").attr("transform", "translate(40, 20)").call(axisLeft);