座標軸(Axis)
座標軸(Axis)在很多圖表中都可見到，例如柱形圖、折線圖、散點圖等。座標軸由一組線段和文字組成，座標軸上的點由一個座標值確定。但是，如果使用SVG的直線和文字一筆一畫的繪製座標軸，工作量將會極其的大。D3提供了座標軸的製作方法，需要之前所給大家講的比例尺一起使用。開發者僅僅需要幾行程式碼，就能夠生成各式各樣的座標軸。
與座標軸相關的方法有:
d3.svg.axis() :
建立一個預設的新座標軸。
axis(selection) :
將此座標軸應用到指定的選擇集上，該選擇集需要包含有<svg>或<g>元素。
axis.scale([scale]) :
設定或獲取座標軸的比例尺。
axis.orient([orientation]) :
設定或獲取座標軸的方向，有四個值:top、bottom、left、right。top表示水平座標軸的刻度在直線下方。bottom表示水平座標軸的刻度在直線上方。left表示垂直座標軸的刻度在直線右方。right表示垂直座標軸的刻度在直線左方。
axis.ticks([argument...]) :
設定或獲取座標軸的分隔數，預設為10.例如設定為5，則座標軸上的刻度數量為6，分段數為5.這個函式會呼叫比例尺的ticks()
axis.tickValues([values]) :
設定或獲取座標軸的指定刻度。例如，引數為[1,2,3,6,7,8]，則在這幾個值上會有刻度。
axis.tickSize([inner,outer]):
設定或獲取座標軸的內外刻度的長度。預設都為6
axis.innerTickSize([size]) :
設定或獲取座標軸的內刻度的長度。內刻度指不是兩端的刻度。
axis.outerTickSize([size]) :
設定或獲取座標軸的外刻度的長度。外刻度指兩端的刻度。
asix.tickFormat([format]) :
設定或獲取刻度的格式。
座標軸的繪製方法:
在之前給大家介紹過，在SVG中有<path>、<line>、<text>元素，D3所繪製的座標軸就是由這三中元素組成的。其中，座標軸的主直線是由<path>繪製的。刻度是由<line>繪製的。刻度文字是由<text>所繪製的。舉個例子:
1 var width = 600;
2 var height = 600;
3 var svg = d3.select("#body")
4 .append("svg")
5 .attr("width",width)
6 .attr("height",height)
7
8 // 用於座標軸的線性比例尺
9 var xScale = d3.scale.linear()
10 .domain([0,10])
11 .range([0,300])
12
13
14 // 定義座標軸
15 var axisBottom = d3.svg.axis()
16 .scale(xScale) //使用上面定義的比例尺
17 .orient("bottom") //刻度方向向下
18
19
20 //在svg中新增一個包含座標軸各元素的g元素
21 var gAxis = svg.append("g")
22 .attr("transform","translate(80,80)") //平移到(80,80)
23 .attr("class","axis") 24
25 //在gAxis中繪製座標軸
26 axisBottom(gAxis)
座標軸的所有圖形元素需放入<svg>或<g>裡，建議新建一個g元素來控制，而不要直接放在<svg>裡，因為<svg>中通常還包含有其他的圖形元素。上面程式碼中，先在<body>中新增了<svg>，然後再在<svg>中新增了<g>，座標軸就繪製在這個<g>中。繪製之後body中的元素結構如圖所示:
class為tick的<g>元素就是刻度，每一個刻度裡都包含有<line>和<text>。座標軸的主直線是最下方的<path>,其class是demain。
xScale是一個線性比例尺，其定義域為[0,10]，這是座標軸刻度值的範圍。值域為[0,300]，這是座標軸實際的畫素長度。定義座標軸時。使用scale(sScale)指定比例尺。程式碼的最後一行，axis(gAxis)表示的是在gAxis選擇集中繪製座標軸，gAxis是在<svg>中新新增的分組元素。結果如圖:
看到圖後是不是覺得這座標軸太醜了 ~ ~ 而且刻度直線都沒有顯示出來。這是因為還沒有為座標軸定製樣式，首先定義class類名，上面程式碼第23行處。然後寫css程式碼:
1 .axis path{
2 fill:none;
3 stroke : black;
4 shape-rendering:crispEdges;
5 }
6 .axis line{
7 fill:none;
8 stroke : black;
9 shape-rendering:crispEdges;
10 }
11 .axis text{
12 font-family: sans-serif;
13 font-size: 11px;
14 }
現在再看一下效果圖:
現在比之前要美觀多了。上面使用了axis(gAxis)的方式來指定繪製的位置。除此之外，還有一種常用的方式。就是之前講過的call()。gAxis.call(axis)。這種方式的呼叫以後會很常用的。
座標軸 刻度
說到座標軸的屬性，基本上是在說刻度，例如刻度的方向、間隔、長度、文字格式等。上次給大家講的座標軸，設定了刻度的方向orientation("bottom")，因此刻度在直線的下方。如果要設定在什麼值上標出刻度，使用ticks()和tickValues()。舉個例子:
1 var width = 600;
2 var height = 600;
3 var svg = d3.select("#body")
4 .append("svg")
5 .attr("width",width)
6 .attr("height",height)
7 //用於座標軸的線性比例尺
8
9 var xScale = d3.scale.linear()
10 .domain([0,10])
11 .range([0,300])
12
13
14 //定義座標軸
15 var axisLeft = d3.svg.axis()
16 .scale(xScale)
17 .orient("left") //刻度方向向左
18 .ticks(5)
19
20
21 //在svg中新增一個包含座標軸各元素的g元素
22 var gAxis = svg.append("g")
23 .attr("transform","translate(80,80)") //平移到(80,80)
24 .attr("class","axis")
25 //在gAxis中繪製座標軸
26 axisLeft(gAxis)
效果圖:
再舉個例子:
1 var width = 600;
2 var height = 600;
3 var svg = d3.select("#body")
4 .append("svg")
5 .attr("width",width)
6 .attr("height",height)
7 //用於座標軸的線性比例尺
8
9 var xScale = d3.scale.linear()
10 .domain([0,10])
11 .range([0,300])
12
13
14 //定義座標軸
15 var axisRight = d3.svg.axis()
16 .scale(xScale)
17 .orient("right") //刻度方向向右
18 .tickValues([3,4,5,6,7])
19
20
21
22 //在svg中新增一個包含座標軸各元素的g元素
23 var gAxis = svg.append("g")
24 .attr("transform","translate(80,80)") //平移到(80,80)
25 .attr("class","axis")
26 //在gAxis中繪製座標軸
27 axisRight(gAxis)
效果圖:
比例尺scale的定義域為[0,10]。上面兩個例子定義了兩個座標軸，刻度分別位於左邊和右邊，刻度值分別用ticks()和tickValues()來指定。注意刻度的區別。
上面繪製的座標軸，刻度的直線都是相同長度的:有時候也需要不同的長度的,最常見的是首位兩個刻度的長度比內部要長。此時需要用到tickSize()，舉個例子:
1 var width = 600; 2 var height = 600; 3 var svg = d3.select("#body") 4 .append("svg") 5 .attr("width",width) 6 .attr("height",height) 7 //用於座標軸的線性比例尺 8 9 var xScale = d3.scale.linear() 10 .domain([0,10]) 11 .range([0,300]) 12 13 //定義座標軸 14 var axiosTop = d3.svg.axis() 15 .scale(xScale) 16 .orient("top") //刻度方向向上 17 .ticks(5) 18 .tickSize(2,4) 19 .tickFormat(d3.format("$0.1f"))
20
21
22 //在svg中新增一個包含座標軸各元素的g元素
23 var gAxis = svg.append("g")
24 .attr("transform","translate(80,80)") //平移到(80,80)
25 .attr("class","axis")
26 //在gAxis中繪製座標軸
27 axiosTop(gAxis)
28
tickSize()的第一個引數是內部刻度的直線長度，第二個引數是首尾兩個刻度的直線長度。也可以用innerTickSize()和outerTickSize()分別進行設定。如圖，兩端的刻度線比內部的要長。
刻度文字的格式通過tickFormat()設定，此外還需要用到d3.format()，它返回的物件作為tickFormat()的引數。在d3.format()的引數裡，可指定刻度文字的格式。例如在上面程式碼第19行處新增.tickFormat(d3.format("$0.1f")) ,然後看一下效果圖:
文字格式的規則遵循迷你語言的格式規範。
各比例尺的座標軸
座標軸必須要設定一個比例尺，根據比例尺的不同可以得到不同的座標軸。使用的最多的是線性比例尺。下面來看看隨著比例尺的不同，座標軸的刻度是怎樣變化的。
一 、 線性比例尺的座標軸:
程式碼 :
1 var width = 600;
2 var height = 600;
3 var svg = d3.select("#body")
4 .append("svg")
5 .attr("width",width)
6 .attr("height",height)
7
8 //用於座標軸的比例尺
9
10 // 線性比例尺
11 var xScaleLine = d3.scale.linear()
12 .domain([0,1])
13 .range([0,500])
14
15 //定義座標軸
16
17 var axisBottomLine = d3.svg.axis()
18 .scale(xScaleLine) //使用上面定義的比例尺
19 .orient("bottom") //刻度方向向下
20
21
22 //在svg中新增一個包含座標軸各元素的g元素
23 var gAxis = svg.append("g")
24 .attr("transform","translate(80,80)") //平移到(80,80)
25 .attr("class","axis")
26
27 //在gAxis中繪製座標軸
28 axisBottomLine(gAxis)
效果圖:
二 、 指數比例尺的座標軸:
程式碼:
1 var width = 600;
2 var height = 600;
3 var svg = d3.select("#body")
4 .append("svg")
5 .attr("width",width)
6 .attr("height",height)
7
8 //用於座標軸的比例尺
9
10 // 指數比例尺
11 var xScalePow = d3.scale.pow()
12 .exponent(2)
13 .domain([0,1])
14 .range([0,500])
15
16
17 //定義座標軸
18
19 var axisBottompPow = d3.svg.axis()
20 .scale(xScalePow) //使用上面定義的比例尺
21 .orient("bottom") //刻度方向向下
22
23
24 //在svg中新增一個包含座標軸各元素的g元素
25 var gAxis = svg.append("g")
26 .attr("transform","translate(80,80)") //平移到(80,80)
27 .attr("class","axis")
28
29 //在gAxis中繪製座標軸
30 axisBottompPow(gAxis)
效果圖:
三 、 對數比例尺的座標軸:
程式碼 :
1 var width = 600;
2 var height = 600;
3 var svg = d3.select("#body")
4 .append("svg")
5 .attr("width",width)
6 .attr("height",height)
7
8 //用於座標軸的比例尺
9
10 var xScaleLog = d3.scale.log()
11 .domain([0.01,1])
12 .range([0,500])
13
14
15 //定義座標軸
16 var axisBottomLog = d3.svg.axis()
17 .scale(xScaleLog) //使用上面定義的比例尺
18 .orient("bottom") //刻度方向向下
19
20 //在svg中新增一個包含座標軸各元素的g元素
21 var gAxis = svg.append("g")
22 .attr("transform","translate(80,80)") //平移到(80,80)
23 .attr("class","axis")
24
25 //在gAxis中繪製座標軸
26 axisBottomLog(gAxis)
效果圖:
其他比例尺下的座標軸大家可以自己去試一下。
下一章給大家做一個帶比例尺、座標軸的柱形圖。