上節我們學習了如何繪制多條曲線， 以及給不同的曲線指定不同的坐標系。在這節當中，我們會對坐標軸標簽相關的處理進行學習。首先，我們來想一個問題， 如何我們的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"));

就是這么簡單！這里我設置了“年-月-日”這樣的格式，當然，如果你覺得這種格式你讓你不爽，你可以設置任何其他的格式?，F在我們的效果如下：