D3.js學習（六）

上節咱們學習瞭如何繪製多條曲線， 以及給不一樣的曲線指定不一樣的座標系。在這節當中，咱們會對座標軸標籤相關的處理進行學習。首先，咱們來想一個問題， 如何咱們的x軸上的各個標籤的距離比較近，可是標籤名又比較長怎麼辦？ 像是下面這種狀況該如何處理？

上圖中x軸上的標籤是否是都重疊在一塊兒了？很是噁心對不對？因此，咱們得想個辦法在不改變ticks標籤直接的距離的狀況下，讓他們達到很好的閱讀效果。

讓ticks標籤旋轉必定的角度

下面咱們的目標就是實現這一種效果：

爲了達到這個目標咱們首先得作一個準備工做：  由於咱們的ticks標籤變高了，因此，爲了容納這些標籤內容，咱們給他提供更多的空間：

var margin = {top:30, right:40, bottom: 50, left: 50};

我想50個像素夠它用了，下面咱們再來處理全部的ticks標籤：

//繪製x座標軸

    svg.append("g")

      .attr("class", "x axis")

      .attr("transform", "translate(0," + height + ")")

      .call(xAxis)

      .selectAll("text")

        .style("text-anchor", "end")

        .attr("dx", "-.8em")

        .attr("dy", ".15em")

        .attr("transform", "rotate(-65)");

好吧，就是這麼簡單，上面的屬性在咱們前面的學習中都已經用到過，也解釋過各個屬性的做用，這裏就不展開說明了，不懂的同窗自覺回顧一下前面的知識。  固然了，實現這種效果確定不單單隻有這樣一種方法，若是你有什麼好的方法，但願你能夠在評論中回覆，Thx!

 

 

自定義ticks標籤內容

咱們知道，d3如此之強大，強大到座標軸的ticks內容的格式他都給咱們本身設置好了。可是，有時候咱們想要本身的格式，怎麼辦呢？  No problem， D3 has your back（不知道什麼意思的同窗自覺Google  ）!!

其實這個太簡單了，比較棘手的問題是咱們要以爲使用什麼樣的格式。在這以前，咱們先再次擴充圖表底部的容量，以保證咱們後面設置的格式可以容納下來，好吧，先來70像素。

var margin = {top:30, right:40, bottom: 70, left: 50};

下一步，定義咱們的格式：

//定義座標軸

  var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(10)

         .tickFormat(d3.time.format("%Y-%m-%d"));

就是這麼簡單！這裏我設置了「年-月-日」這樣的格式，固然，若是你以爲這種格式你讓你不爽，你能夠設置任何 其餘的格式。如今咱們的效果以下：

 

 

好吧，本節知識點就這些，若是有什麼問題但願你猛擊「評論」給我留言，我將竭盡所能給你解答。下一節，咱們將給咱們的圖表加入動畫效果！

 

 

 

感謝您的關注： http://weibo.com/u/1914017207 （專一前端，熱愛分享）