D3.js比例尺

D3比例尺

1.什么是比例尺？

• 比例尺：通俗理解就是要展示的数据的量度，比如定义域[0,100]，值域[0，10]，那么可以说[0,100]是定义域的尺度，我们也可以将横坐标的范围设置为[0,1000]，但是尝试过之后就会发现对数据可视化而言不友好。正如下图所反应的这样。
  
  那么我们需要给数据合适的度量，这就是d3的比例尺通俗的理解。在d3中，我们将比例尺分成两类：①定量比例尺(连续的定义域)；②序数比例尺（定义域不连续）。

---

2.定量的比例尺：连续的定义域，值域可能连续也可能不连续。

• 线性比例尺：最常用的比例尺，计算线性的对应关系

     let linear = d3.sacle.linear()  //创建一个线性比例尺
                  .domain([0,100])   //设置定义域
                  .range([0,10])     //设置值域
    console.log(linear(5))      //0.5,获取某个定义域的值对应的值域的值
    console.log(linear.invert(10))      //100,获取某个值域的值对应的定义域的值  
    linear.nice[count]//格式化定于的范围，例如[0.11111111,49.999999]直接变为[0,50]  
    linear.ticks([count])//选取坐标轴刻度，count代表刻度的个数
    linear.clamp([boolean])//设置为true，任何超出值域范围的值都会被收缩到值域范围内。
    linear.rangeRound([value])//rangeRound代替range，比例尺的值是经过四舍五入的整数；

• 指数比例尺和对数比例尺：api基本和线性比例尺相同，

   let pow = d3.scale.pow().exponent(3)//指数比例尺，指数为3；
   let log = d3.scale.log()

• 量子比例尺 ：定义域是连续的，值域是离散的

  let quantize = d3.scale.quantize()
               .domain([0,10])
               .range(["red","green","blue","yellow","black"])

• 临界值比例尺：为定义域设定临界值，而将值域归类

  let t = d3.scale.threshold().domain([0, 1]).range(['a', 'b', 'c']); 
  t(-1) === 'a';
  t(0) === 'b';
  t(0.5) === 'b';
  t(1) === 'c';
  t(1000) === 'c';
  t.invertExtent('a'); //returns [undefined, 0]
  t.invertExtent('b'); //returns [0, 1]
  t.invertExtent('c'); //returns [1, undefined]

---

3.序数比例尺：定义域和值域都是离散的

let ordinal = d3.scale.ordinal()  //构建一个序数比例尺，定义域和值域一一对应
            .domain([1,2,3,4,5])
            range([10,20,30,40,50])
ordinal.rangePoints([0,100])//（interval,padding）interval是区间，padding边界部分留白,省略默认为0，输入连续区间自动计算连续值[0,25,50,75,100]；
ordinal.rangeBands([0,100])//（interval,padding,outerPadding）outerPadding边界的空白，默认为0，[0,20,40,60,80]