线性比例尺，创建一个度量匹配值
https://github.com/xswei/d3-scale/blob/master/README.md

d3.scaleLinear 返回 continuous对象 [kənˈtɪnjuəs] 连续的

返回一个线性比例尺对象

continuous.domain([domain]) 设置定义域

设置定义域, domain必须是数值, 例如 continuous.domain([0, 10])

continuous.range([range]) 设置值域

设置值域range可以是任意值 例如 continuous.range([“red”, “blue”]);
任何支持 interpolator 的类型都可以被设置。但是要注意的是如果要使用 invert 则 range 必须指定为数值类型. 如果 range 没有指定则返回比例尺当前 range 的拷贝。参考 continuous.interpolate 获取更多例子。

continuous.rangeRound([range]) 简写

等价与

  1. continuous
  2.     .range(range)
  3.     .interpolate(d3.interpolateRound);

d3.interpolateRound(a, b) 插值器

返回一个在两个数值 a 和 b 之间插值的插值器; 这个插值器与 interpolateNumber 类似但是会对返回的结果进行四舍五入。.

continuous.clamp(clamp) 设置不允许超出边界值

在未设置clamp时，则当传入位于 domain 之外的值时会推算出对应的、处于 range 之外的值。

  1. var x = d3.scaleLinear()
  2.     .domain([10, 130])
  3.     .range([0, 960]);
  5. x(-10); // -160, outside range
  6. x.invert(-160); // -10, outside domain
  8. x.clamp(true);
  9. x(-10); // 0, clamped to range
  10. x.invert(-160); // 10, clamped to domain

continuous.interpolate(interpolate) 指定插值器

如果指定了 interpolate 则设置比例尺的 range 插值器。插值器函数被用来在两个相邻的来自 range 值之间进行插值；这些插值器将输入值 t 归一化到 [0, 1] 之间。如果 factory 没有指定则返回比例尺的当前插值函数。默认为 interpolate. 参考 d3-interpolate 获取更多关于插值器的介绍。
例如，考虑输出范围为三个颜色值：

  1. var color = d3.scaleLinear()
  2.     .domain([-100, 0, +100])
  3.     .range(["red", "white", "green"]);

内部会创建两个插值器，等价于：

  1. var i0 = d3.interpolate("red", "white"),
  2.     i1 = d3.interpolate("white", "green");

自定义插值器的一个直接的原因是可以修改插值器的颜色空间，比如使用 HCL 颜色空间:

  1. var color = d3.scaleLinear()
  2.     .domain([10, 100])
  3.     .range(["brown", "steelblue"])
  4.     .interpolate(d3.interpolateHcl);

或者自定义 Cubehelix 的 gamma 值:

  1. var color = d3.scaleLinear()
  2.     .domain([10, 100])
  3.     .range(["brown", "steelblue"])
  4.     .interpolate(d3.interpolateCubehelix.gamma(3));

注意：default interpolator 可能复用返回值。例如，如果 range 为对象，则 range 插值器总是返回同一个修改后的对象。如果比例尺用来设置样式或者属性，则可以使用这种方式，但是如果你想存储比例尺的返回值，则必须指定自己的插值器或者适当的复制。

continuous.ticks([count]) 刻度尺

返回近似的用来表示比例尺 domain 的 count。如果没有指定 count 则默认为 10. 返回的 tick 值的个数是均匀的并且对人类友好的(比如都为 10 的整数倍)，切在 domain 的范围内。ticks 经常被用来显示刻度线或者刻度标记。指定的 count 仅仅是一个参考，比例尺会根据 domain 计算具体的 ticks。可以参考 d3-array 的 ticks.

continuous.tickFormat([count[, specifier]]) 格式化的刻度尺

返回一个调整小时刻度值的 number format 函数。count 应该与通过 tick values 指定的 count 相同。

  1. var x = d3.scaleLinear()
  2.     .domain([-1, 1])
  3.     .range([0, 960]);
  5. var ticks = x.ticks(5),
  6.     tickFormat = x.tickFormat(5, "+%");
  8. ticks.map(tickFormat); // ["-100%", "-50%", "+0%", "+50%", "+100%"]

continuous.copy() 复制一个尺度

返回一个当前比例尺的拷贝。返回的拷贝和当前比例尺之间不会相互影响。

continuous.nice([count]) 优化domain使其取整

扩展 domain 使其为整。这个方法通常会修改 domain 将其扩展为最接近的整数值。可选的 count 参数可以用来控制扩展的步长。对 domain 的取整在根据数据计算 domain 时候很有用。比如计算后的 domain 为 [0.201479…, 0.996679…] 时，在经过取整之后会被扩展为 [0.2, 1.0]。如果 domain 包含两个以上的元素，则取整操作仅仅影响第一个和最后一个值。参考 d3-array 的 tickStep 操作。

例子

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <title>d3 5.15.1</title>
  6.   <style>
  7.     .text {
  8.       text-indent: 2em;
  9.     }
  11.     .pre {
  12.       white-space: pre-wrap;
  13.       background-color: #eee;
  14.       border: 1px solid #ccc;
  15.     }
  16.   </style>
  17.   <script src="../lib/d3.js" type="text/javascript"></script>
  18. </head>
  20. <body>
  21.   <a href="../index.html">首页</a>
  22.   <br />
  23.   <br />
  24.   <div class="pre">
  25.     var fn = d3.scaleLinear().domain([0, 10]).range([0, 100]);
  28.     alert(fn(5)); // 
  29.     alert(fn(10)); // 
  30.     alert(fn(11).toFixed(0)); // 
  32.     var color = d3.scaleLinear()
  33.     .domain([0, 32])
  34.     .range(["red", "blue"]);
  36.     color(20); // "#9a3439"
  37.     color(50); // "#7b5167"
  39.     var body = d3.select('body');
  41.     var data = [];
  43.     for (let i = 0; i < 32; i++) {
  44.       data.push(color(i));
  45.     }
  47.     body.selectAll('.color').data(data).enter().append("div").style("color", function (d) {
  48.       return d;
  49.     }).text(function (d) {
  50.       return d;
  51.     })
  53.     var x = d3.scaleLinear()
  54.     .domain([10, 130])
  55.     .range([0, 960]);
  57.     alert(x.invert(960)); // 130
  58.     alert(x.invert(0)); // 10
  60.     Domain 定义域 range 映射域
  62.     var color = d3.scaleLinear()
  63.     .domain([-1, 0, 1])
  64.     .range(["red", "white", "green"]);
  66.     var colorData = [
  67.       color(-0.5), // "rgb(255, 128, 128)"
  68.       color(+0.5), // "rgb(128, 192, 128)"
  69.     ]
  71.     body.selectAll('.color1').data(colorData).enter().append("div").style("color", function (d) {
  72.       return d;
  73.     }).text(function (d) {
  74.       return d;
  75.     })
  77.   </div>
  80.   <script>
  81.     var fn = d3.scaleLinear().domain([0, 10]).range([0, 100]);
  84.     alert(fn(5)); // 
  85.     alert(fn(10)); // 
  86.     alert(fn(11).toFixed(0)); // 
  88.     var color = d3.scaleLinear()
  89.     .domain([0, 32])
  90.     .range(["red", "blue"]);
  92.     color(20); // "#9a3439"
  93.     color(50); // "#7b5167"
  95.     var body = d3.select('body');
  97.     var data = [];
  99.     for (let i = 0; i < 32; i++) {
  100.       data.push(color(i));
  101.     }
  103.     var div = body.selectAll('.color').data(data).enter().append("div").style("color", function (d) {
  104.       return d;
  105.     }).text(function (d) {
  106.       return d;
  107.     })
  109.     var x = d3.scaleLinear()
  110.     .domain([10, 130])
  111.     .range([0, 960]);
  113.     alert(x.invert(960)); // 130
  114.     alert(x.invert(0)); // 10
  116.     var color = d3.scaleLinear()
  117.     .domain([-1, 0, 1])
  118.     .range(["red", "white", "green"]);
  120.     var colorData = [
  121.       color(-1),
  122.       color(-0.5), // "rgb(255, 128, 128)"
  123.       color(0),
  124.       color(+0.5), // "rgb(128, 192, 128)"
  125.       color(1)
  126.     ]
  128.     body.selectAll('.color1').data(colorData).enter().append("div").style("color", function (d) {
  129.       return d;
  130.     }).text(function (d) {
  131.       return d;
  132.     })
  133.   </script>
  134. </body>
  136. </html>