比例尺是 d3 中很重要的乙個概念，上一章裡曾經提到過直接用數值的大小來代表畫素不是一種好方法，本章正是要解決此問題。
1
vardataset=[
250,
210,
170,
130,90]
; 繪圖時，直接使用 250 給矩形的寬度賦值，即矩形的寬度就是 250 個畫素。
此方式非常具有侷限性，如果數值過大或過小，例如： 1
2
vardataset_1=[
2.5,
2.1,
1.7,
1.3,
0.9];
vardataset_2=[
2500
,2100
,1700
,1300
,900];
對以上兩個陣列，絕不可能用 2.5 個畫素來代表矩形的寬度，那樣根本看不見；也不可能用 2500 個畫素來代表矩形的寬度，因為畫布沒有那麼長。
於是，我們需要一種計算關係，能夠：
將某一區域的值對映到另一區域，其大小關係不變。
這就是比例尺（scale）。
比例尺，很像數學中的函式。例如，對於乙個一元二次函式，有 x 和 y 兩個未知數，當 x 的值確定時，y 的值也就確定了。
在數學中，x 的範圍被稱為定義域，y 的範圍被稱為值域。
d3 中的比例尺，也有定義域和值域，分別被稱為 domain 和 range。開發者需要指定 domain 和 range 的範圍，如此即可得到乙個計算關係。
d3 提供了多種比例尺，下面介紹最常用的兩種。
線性比例尺，能將乙個連續的區間，對映到另一區間。要解決柱形圖寬度的問題，就需要線性比例尺。
假設有以下陣列： 1
vardataset=[
1.2,
2.3,
0.9,
1.5,
3.3];
現有要求如下：
將 dataset 中最小的值，對映成 0；將最大的值，對映成 300。
**如下： 1
2
3
4
5
6
7
8
9
10
varmin=d3.
min(
dataset);
varmax=d3.
max(
dataset);
varlinear=d3
.scale
.linear()
.domain([
min,
max])
.range([
0,300]);
linear
(0.9);
//返回 0
linear
(2.3);
//返回 175
linear
(3.3);
//返回 300
其中，d3.scale.linear()返回乙個線性比例尺。domain() 和 range() 分別設定比例尺的定義域和值域。在這裡還用到了兩個函式，它們經常與比例尺一起出現：
這兩個函式能夠求陣列的最大值和最小值，是 d3 提供的。按照以上**，
比例尺的定義域 domain 為：[0.9, 3.3]
比例尺的值域 range 為：[0, 300]
因此，當輸入 0.9 時，返回 0；當輸入 3.3 時，返回 300。當輸入 2.3 時呢？返回 175，這是按照線性函式的規則計算的。
d3.scale.linear() 的返回值，是可以當做函式來使用的。因此，才有這樣的用法：linear(0.9)。
有時候，定義域和值域不一定是連續的。例如，有兩個陣列： 1
2
varindex=[
0,1,
2,3,
4];
varcolor=[
"red"
,"blue"
,"green"
,"yellow"
,"black"];
我們希望 0 對應顏色 red，1 對應 blue，依次類推。
但是，這些值都是離散的，線性比例尺不適合，需要用到序數比例尺。 1
2
3
4
5
6
7
varordinal=d3
.scale
.ordinal()
.domain
(index)
.range
(color);
ordinal(0
);//返回 red
ordinal(2
);//返回 green
ordinal(4
);//返回 black
用法與線性比例尺是類似的。
在上一章的基礎上，修改一下陣列，再定義乙個線性比例尺。 1
2
3
4
5
vardataset=[
2.5,
2.1,
1.7,
1.3,
0.9];
varlinear=d3
.scale
.linear()
.domain([
0,d3.
max(
dataset)]
) .range([
0,250]);
其後，按照上一章的方法新增矩形，在給矩形設定寬度的時候，應用比例尺。 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
varrectheight=25
;//每個矩形所佔的畫素高度(包括空白)
svg.
selectall
("rect")
.data
(dataset)
.enter()
.("rect"
)//x:表示矩形距離左側的距離
.attr
("x",20
)//y:表示矩形距離頂部的距離，下標index*每個rect高度
.attr
("y"
,function(d
,i))
.attr
("width"
,function(d
)).attr
("height"
,rectheight-2
) .attr
("fill"
,"steelblue");
如此一來，所有的數值，都按照同乙個線性比例尺的關係來計算寬度，因此數值之間的大小關係不變。
d3裡的比例尺
1 d3中的比例尺也有定義域和值域，分別是domain和range,開發者需要指定domain和range的範圍，如此即可以得到乙個計算關係 2 線性比例尺 能將乙個連續的區間對映到另一區間，要解決柱形圖寬度的問題，就需要線性比例尺 3 如 4var dataset 1.2,2.3,0.9,1.5,...
D3中常用的比例尺
d3中有個重要的概念就是比例尺。比例尺就是把一組輸入域對映到輸出域的函式。對映就是兩個資料集之間元素相互對應的關係。比如輸入是1，輸出是100，輸入是5，輸出是10000，那麼這其中的對映關係就是你所定義的比例尺。d3中有各種比例尺函式，有連續性的，有非連續性的，本文對於常用比例尺進行一一介紹。1....
d3的比例尺和座標軸
1.比例尺 比例尺的關鍵概念 定義域和值域，比例尺本質就是乙個函式。常用比例尺有 1.1 線性比例尺 d3.scale.linear 1.2 指數比例尺 d3.scale.pow exponent x x為指數 1.3 對數比例尺 d3.scale.log 1.4 量子比例尺 d3.scale.qu...