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