D3.js學習（二）

時間 2019-11-18

原文原文鏈接

上一節中咱們已經畫出了一個基本的圖表，不過忘了給座標軸添加標籤了，因此在本節中咱們要給座標軸加上標籤，目標效果以下javascript

給X軸添加標籤java

很明顯，標籤是否是一個text內容塊啊，因此咱們只要在svg中添加一個text而後再給這個text定位和指定內容不就好了麼？先來看如何給x軸添加標籤app

//增長一個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軸添加標籤svg

同理，給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軸上的平移距離。code

給圖表添加標題orm

添加標題跟添加座標軸的標籤實際上是同樣的，只不過定位有所不一樣而已ip

//給圖表添加一個標題
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("一個簡單的圖表");

效果圖：io

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