D3.js學習（二）

上一節中我們已經畫出了一個基本的圖表，不過忘了給坐標軸添加標簽了，所以在本節中我們要給坐標軸加上標簽，目標效果如下

給X軸添加標簽

很明顯，標簽是不是一個text內容塊啊，所以我們只要在svg中添加一個text然后再給這個text定位和指定內容不就行了么？先來看如何給x軸添加標簽

//增加一個x軸的標簽
svg.append("text")
    .attr("transform", "translate(" + (width/2) + "," + (height + margin.bottom) + ")")
    .style("text-anchor", "middle")
    .text("Date");

上面代碼可能又兩個地方需要解釋，第一，transform屬性，詳細的介紹可以看我w3c的定義，這里我們用到的是他的一個translate屬性，也就是移動，第一個參數是相對於原點在x軸上的位移距離，第二個是相對於原點在y軸上的位移距離；第二，text-anchor屬性，是指文本相對於插件點的對齊方式，我們這里用到的是中間對齊，也就是說文本的中點與x軸的中點（文本插入點）對齊.

 

給Y軸添加標簽

同理，給y軸添加一個標簽

//增加一個y軸的標簽
svg.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 0 - margin.left)
    .attr("x", 0 - (height/2))
    .attr("dy", "1em")
    .style("text-anchor" , "middle")
    .text("Value");

這里的rotate值表示文本相對於原點的旋轉角度，負數表示逆時針旋轉，dy屬性表示文本在y軸上的平移距離。

給圖表添加標題

添加標題跟添加坐標軸的標簽其實是一樣的，只不過定位有所不同而已

//給圖表添加一個標題
svg.append("text")
    .attr("x", (width/2))
    .attr("y", 0 - (margin.top /2 ))
    .attr("text-anchor", "middle")
    .style("font-size", "16px")
    .style("text-decoration", "underline")
    .text("一個簡單的圖表");

效果圖：

這樣，坐標軸的標簽和圖表的標題我們就添加上啦。下一節中，我們將對圖表中的path進行處理！