坐標軸(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)
效果圖:
其他比例尺下的坐標軸大家可以自己去試一下。
下一章給大家做一個帶比例尺、坐標軸的柱形圖。