D3学习指北–第四章，比例尺和坐标轴

D3学习指北–第四章，比例尺和坐标轴

1、前言

  虽然上节我们画了柱形图，但是，其中还有很多的地方需要完善，最重要的一点就是我们的坐标轴还没有完成，那么我们今天所学的内容，能帮我们给柱形图加上坐标轴，
首先，我们先思考一个问题，这样能更有效的帮助我们学习今天的内容。

• 我们的网页宽度有限，坐标轴表示的数据无限大，我们怎么把无限大的数据放到有限的长度内呢？

---

  D3给出的解决方法是“比例尺”，功能是能把一个区间映射到一个你想要的数据区间中，这也应该是我们大多数人想到的方法。
下面就开始了今天的讲解，因为立坐标轴需要用到“比例尺”，所以我们前面会先讲解比例尺，可能会有点唐突，但是他是坐标轴的前提。

2、比例尺

  因为将数据区间映射成另外一种数据区间的情况有很多，比如：一个数据区间要按照线性比例映射另一个区间，也可能是按照指数比例映射，当然，也可能是按照离散的方式映射。不过，这些所有的工具都叫做比例尺，这一个小分段就是讲解各种比例尺。

• 特别提示：比例尺只是坐标轴前置的一个工具，但是它的作用不仅仅是服务坐标轴。

比例尺的声明格式都一样，只有一些略微的差别。

d3.scala.声明比例尺的方法名().domain([比例尺的原始区间]).映射区间取值或跨度的方法([比例尺的映射区间])

线性比例尺

  线性比例尺与线性函数类似，是倍数关系的映射到对应的区间

• d3.scala.linear()
    创建一个线性比例尺
• linear.domain([numbers])
    设置比例尺的原始区间，也可以用于查看原始区间
• linear.range([values])
    设置比例尺的映射区间，也可以用于查看映射区间
• linear(x)
    返回x在比例尺映射区间内的值
• linear.invert(x)
    返回x在比例尺原始区间内的值

	var linear= d3.scale.linear(); //声明一个线性比例尺
	linear.domain([10,20]); //设定比例尺的原始区间为 [10,20]
	linear.range([0,100]); //设定比例尺的映射区间为 [0,20]
	console.log(linear(18)); //80
	console.log(linear.invert(88)); //18.8

这几个方法是比例尺用的最多的方法,下面简单介绍以下不常用的方法，这些方法只需要知道有就行。

• linear.rangeRound([values])
    可以替代range()方法，这个方法比例尺返回的数据会四舍五入取整。
• linear.clamp()
    设置比例尺超出原始区间时返回的值
• linear.nice()
    将原始区间跟映射区间变为整数区间
• linear.ticks([count])
    这个方法下面演示不做解释

  这些方法大家可以了解，用到的时候查询一下就可以了，我们是指北，而非详细介绍。

序数比例尺

  序数比例尺是离散的映射，即不是连续的映射，列如.domain[1,2,3] .range[“red”,“green”,“blue”]；这个例子是1映射为"red"，等。

• d3.scala.ordinal()
    创建一个序数比例尺
  -ordinal.domain([values])
    设置比例尺的原始区间，也可以用于查看原始区间
  -ordinal.range([values])
    设置比例尺的映射区间，也可以用于查看映射区间
  -ordinal(x)
    返回x对应的映射区间的值
  -ordinal.rangeBands(interval)
    代替range()设置映射区间，接受一个映射区间，分割成原始区间的元素个数
  -ordinal.rangeRoundBands(interval)
    跟rangeBands()一样，结果会取整

	var ordinal= d3.scale.ordinal(); //声明一个线性比例尺
	ordinal.domain([1,2,3]); //设定比例尺的原始区间为 [1,2,3]
	ordinal.range(["red","green","blue"]); //设定比例尺的映射区间为 ["red","green","blue"]
	console.log(ordinal(2)); //green
	ordinal.rangeBands([0,301]); 
	console.log(ordinal(2)); //100.333333333333
	ordinal.rangeRoundBands([0,301]);
	console.log(ordinal(2)); //101

上面的方法是常用的，下面介绍不常用的几个方法。
-ordinal.rangePoints([interval])
  与rangeBands()一样，分割的方法不同
-ordinal.rangeRoundPoints([interval])
  与rangeRoundBands()一样，分割的方法不同,想了解的同学可以查询一下两个的分割方法
-ordinal.rangeBand()
  返回使用rangeBands()设定后的每一段宽度
-ordinal.rangeExtend()
  返回一个数组，数组里存有值域的最大值和最小值

  同上一个一样，这些方法了解就好，另外因为我本人讲究实用性，所以比例尺的顺序对应着实用性的高低。

指数与对数比例尺

  指数与对数比例尺方法的内容与线性比例尺的内容方法一样，但是声明方法不一样

• d3.scale.pow().exponent(3)
    创建一个指数为3的指数比例尺
• d3.scale.pow().base(3)
    创建一个底数为3的对数比例尺

其余的添加原始区间与映射区间的的方法与线性比例尺一样

另外还有量子和分位比例尺，用的情况不多，为了不浪费篇幅，可以了解一下，应用的时候可以自行查看应用方法

3、坐标轴

因为坐标轴长度有限，而数据是无限大的，所以作者想了一个巧妙设计：把比例尺安装到坐标轴上，就可以用一段坐标轴，显示无限大的数。

下面给大家介绍一下坐标轴创建及其方法：

• d3.svg.axis()
    创建一个新的的坐标轴
• axis(selection)
     将坐标轴绑定到选择集上，即绘制坐标轴
• axis.scale([scale])
    给坐标轴设定一个比例尺
• axis.orlent([orientation])
    设置坐标轴方向，有"left",“bottom”,“right”,“top”;表示垂直坐标轴的方向。

以上就是几个最常用的坐标轴的几个方法，需要熟记这几个方法。

• axis.ticks()
    设定坐标轴上有几个间隔数，默认为10
• axis.tickValues([claues])
    设定坐标轴的指定刻度。如，参数为[1,2,5,9]，则坐标轴上刻度就显示这几个刻度。

另外还有设置坐标轴内外刻度，刻度格式等方式，因为用的不多，这里就不做阐述了。

特别说明：坐标轴的原始区间为坐标轴的刻度，坐标轴的映射区间为坐标轴的长度。

4、演示坐标系的建立

   var svg = d3.select("body").append("svg")
   			.attr("wigth","600px")
   			.attr("height","600px"); //添加一个svg标签，设置宽高为600px
   var Xscale = d3.scale.linear()
   			.domain([0,10])
   			.range([0,300]); //创建一个用于坐标轴的比例尺
   var Xaxis = d3.svg.axis().scale(Xscale).orient("bottom"); //定义一个刻度方向向下的坐标轴
   var gXaxis = svg.append("g").attr("transform","translate(80,350)"); //添加一个g标签，用于绘制坐标轴
   Xaxis(gXaxis); //绘制坐标轴

上面的完成了一个一个坐标轴的绘制，图片如下：

我们添加以下的css样式代码并且给添加的g标签添加一个"axis"的class，可以让坐标轴变得好看，如下：

添加的css样式：

	.axis path,
	.axis line{
		fill:none;
		stroke:black;
		shape-rendering: crispEdges;
	}
	.axis text{
		font-family: sans-serif;
		font-size: 11px;
	}

修改的js行为第8行：

	var gXaxis = svg.append("g").attr("class","axis").attr("transform","translate(80,350)"); //添加一个g标签，用于绘制坐标轴

尾言

  这一个章节是为了给大家介绍坐标轴，因为d3的自由性，所以坐标轴分了3部分，即：比例尺，坐标轴，坐标轴绑定的元素。

  这是一个指北博客，所以内容之突出有用的，不能做为学习资料，但是这个系列博客会成为你学习辅助最好的资料。

  这个系列后天会出一篇应用，用于讲解这个工具怎么使用。