D3.js坐標軸的繪製方法、添加坐標軸的刻度和各比例尺的坐標軸(V3版本)

坐標軸(Axis) 坐標軸(Axis)在很多圖表中都可見到，例如柱形圖、折線圖、散點圖等。坐標軸由一組線段和文字組成，坐標軸上的點由一個坐標值確定。但是，如果使用SVG的直線和文字一筆一畫的繪製坐標軸，工作量將會極其的大。D3提供了坐標軸的製作方法，需要之前所給大家講的比例尺一起使用。開發者僅僅需要 ...

坐標軸(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)

效果圖:

其他比例尺下的坐標軸大家可以自己去試一下。

下一章給大家做一個帶比例尺、坐標軸的柱形圖。