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 （专一前端，热爱分享）