博客

本文目前来说，是学完

极客学院的《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