D3 笔记三：线性比例尺、序数比例尺、domain()、range()

本文目前来说，是学完极客学院的《D3.js 入门教程》之后的整理出来的精简知识版，仅仅是为了知识整理。后期我会随着学习的深入，在这个基础上，进行维护与更改。

1. 如果用原生数值代替像素值，显示的图形过小或过大时，就需要将某一区域的值映射到另一区域，但其大小关系不变，这就是比例尺（Scale）了。

2. 定义域与值域
   在数学中，x 的范围被称为定义域，y 的范围被称为值域。D3 中的比例尺，也有定义域和值域，分别被称为 domain 和 range。开发者只需要指定 domain() 和 range() 的范围，如此即可得到一个计算关系。

3. 两种比例尺

   1. 线性比例尺：

      var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
      var min = d3.min(dataset);
      var max = d3.max(dataset);
      
      var linear = d3.scale.linear()  // 生成线性比例尺
          .domain([min, max])         // 设置定义域
          .range([0, 300]);           // 设置值域
      
      linear(0.9);    //返回 0
      linear(2.3);    //返回 175
      linear(3.3);    //返回 300

      其中，d3.scale.linear() 返回一个线性比例尺，返回值可以当做函数来使用的。domain() 和 range() 分别设定比例尺的定义域和值域。

      注意：V4 版本改变了写法，应该是 var linear = d3.scaleLinear(); 。

      在这里还用到了两个函数，它们经常与比例尺一起出现：

      • d3.max()
      • d3.min()

      这两个函数能够求数组的最大值和最小值，是 D3 提供的。

   2. 序数比例尺：
      如果，定义域和值域不一定是连续的，都是离散的。那就要用到序数比例尺了。

      var index = [0, 1, 2, 3, 4];
      var color = ["red", "blue", "green", "yellow", "black"];
      
      var ordinal = d3.scale.ordinal()        // 生成序数比例尺
          .domain(index)
          .range(color);
      
      ordinal(0);     // 返回 red
      ordinal(2);     // 返回 green
      ordinal(4);     // 返回 black