坐標(biāo)軸，是可視化圖表中經(jīng)常出現(xiàn)的一種圖形，由一些列線段和刻度組成。坐標(biāo)軸在 SVG 中是沒有現(xiàn)成的圖形元素的，需要用其他的元素組合構(gòu)成。D3 提供了坐標(biāo)軸的組件，如此在 SVG 畫布中繪制坐標(biāo)軸變得像添加一個普通元素一樣簡單。

http://wiki.jikexueyuan.com/project/d3wiki/images/axis-1.png" alt="柱形圖" />

坐標(biāo)軸由什么構(gòu)成

在 SVG 畫布的預(yù)定義元素里，有六種基本圖形：

• 矩形
• 圓形
• 橢圓
• 線段
• 折線
• 多邊形

另外，還有一種比較特殊，也是功能最強(qiáng)的元素：

• 路徑

畫布中的所有圖形，都是由以上七種元素組成。

顯然，這里面沒有坐標(biāo)軸 這種元素。如果有的話，我們可以采用類似以下的方式定義：

<axis x1="" x2="" ...></axis>

很可惜，沒有這種元素。但是，這種設(shè)計是合理的：不可能為每一種圖形都配備一個單獨(dú)的元素，那樣 SVG 就會過于龐大。

因此，我們需要用其他元素來組合成坐標(biāo)軸，最終使其變?yōu)轭愃埔韵碌男问剑?/p>

<g>
<!-- 第一個刻度 -->
<g>
<line></line>   <!-- 第一個刻度的直線 -->
<text></text>   <!-- 第一個刻度的文字 -->
</g>
<!-- 第二個刻度 -->
<g>
<line></line>   <!-- 第二個刻度的直線 -->
<text></text>   <!-- 第二個刻度的文字 -->
</g> 
...
<!-- 坐標(biāo)軸的軸線 -->
<path></path>
</g>

分組元素 ，是 SVG 畫布中的元素，意思是 group。此元素是將其他元素進(jìn)行組合的容器，在這里是用于將坐標(biāo)軸的其他元素分組存放。

如果需要手動添加這些元素就太麻煩了，為此，D3 提供了一個組件：d3.svg.axis()。它為我們完成了以上工作。

定義坐標(biāo)軸

上一章提到了比例尺的概念，要生成坐標(biāo)軸，需要用到比例尺，它們二者經(jīng)常是一起使用的。下面，在上一章的數(shù)據(jù)和比例尺的基礎(chǔ)上，添加一個坐標(biāo)軸的組件。

//數(shù)據(jù)
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
//定義比例尺
var linear = d3.scale.linear()
      .domain([0, d3.max(dataset)])
      .range([0, 250]);

var axis = d3.svg.axis()
     .scale(linear)      //指定比例尺
     .orient("bottom")   //指定刻度的方向
     .ticks(7);          //指定刻度的數(shù)量

第 1 – 2 行：定義數(shù)組。

第 4 – 7 行：定義比例尺，其中使用了數(shù)組 dataset。

第 9 – 12 行：定義坐標(biāo)軸，其中使用了線性比例尺 linear。其中：

• d3.svg.axis()：D3 中坐標(biāo)軸的組件，能夠在 SVG 中生成組成坐標(biāo)軸的元素。
• scale()：指定比例尺。
• orient()：指定刻度的朝向，bottom 表示在坐標(biāo)軸的下方顯示。
• ticks()：指定刻度的數(shù)量。

在 SVG 中添加坐標(biāo)軸

定義了坐標(biāo)軸之后，只需要在 SVG 中添加一個分組元素 ，再將坐標(biāo)軸的其他元素添加到這個 里即可。代碼如下：

svg.append("g")
   .call(axis);

上面有一個 call() 函數(shù)，其參數(shù)是前面定義的坐標(biāo)軸 axis。

在 D3 中，call() 的參數(shù)是一個函數(shù)。調(diào)用之后，將當(dāng)前的選擇集作為參數(shù)傳遞給此函數(shù)。也就是說，以下兩段代碼是相等的。

function foo(selection) {
  selection
      .attr("name1", "value1")
      .attr("name2", "value2");
}
foo(d3.selectAll("div"))

和

d3.selectAll("div").call(foo);

因此，

svg.append("g").call(axis);

與

axis(svg.append(g));

設(shè)定坐標(biāo)軸的樣式和位置

默認(rèn)的坐標(biāo)軸樣式不太美觀，下面提供一個常見的樣式：

<style>
.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
</style>

分別定義了類 axis 下的 path、line、text 元素的樣式。接下來，只需要將坐標(biāo)軸的類設(shè)定為 axis 即可。

坐標(biāo)軸的位置，可以通過 transform 屬性來設(shè)定。

通常在添加元素的時候就一并設(shè)定，寫成如下形式：

svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(20,130)")
  .call(axis);

源代碼

下載地址：rm50.zip

展示地址：http://www.ourd3js.com/demo/rm/R-5.0/Axis.html