D3.js Continuous Scales API 完整参考

D3.js是一个强大的JavaScript库，用于数据可视化和交互式图表。其中包含了多个类型的尺度（scale），其中连续尺度（continuous scales）可以将任意输入域映射到任意输出域。

本文将介绍D3.js连续尺度的完整API参考。

安装

你可以通过NPM安装D3.js:

npm install d3

或者，在HTML中引用：

<script src="https://d3js.org/d3.v5.min.js"></script>

核心概念

D3.js中的连续尺度，可以将输入域中的任意值映射到输出域中的任意值。在使用D3.js的连续尺度时，你需要明确以下几个核心概念：

• 输入域（domain）：输入数据的范围。
• 输出域（range）：输出数据的范围。
• 插值（interpolate）：如何在输入域之间插值以计算输出值。
• 查找器（clamp）：是否限制输出值在输出域内。

API参考

d3.scaleLinear()

创建一个线性比例尺。线性比例尺经常用于映射连续的，量化的域（如温度，海拔等）到一个常量域（如像素值，颜色等）。

Input

• domain: 数组，包含两个或多个有序的数字。默认值为[0,1]。
• range: 数组，包含两个或多个有序的数字，表示输出域的范围。默认值为[0,1]。
• interpolate: 插值函数，用于在输入域之间插值以计算输出值。默认为d3.interpolate。
• clamp: 是否保留一个值的范围在输出范围之内，而不是将值严格限制在范围之内。默认为false。

Output

一个转换函数，用于将输入域中任意值映射到输出域中的任意值。

示例

// 创建一个线性比例尺，将0到10映射到100到200
var scale = d3.scaleLinear()
  .domain([0, 10])
  .range([100, 200]);

// 返回200
scale(10);

// 返回150
scale(5);

d3.scaleLog()

创建一个对数尺度。适用于在输入域中包含大量顺序数据，例如人口，金额等等。

Input

• domain: 数组，包含两个或多个有序的数字。默认值为[1,10]。
• range: 数组，包含两个或多个有序的数字，表示输出域的范围。默认值为[0,1]。
• base: 可选择指定底数。默认为10
• interpolate: 插值函数，默认为d3.interpolate。
• clamp: 是否保留一个值的范围在输出范围之内，而不是将值严格限制在范围之内。默认为false。

Output

一个转换函数，用于将输入域中任意值映射到输出域中的任意值。

//创建一个对数比例尺，将10^0 - 10^6映射到0 - 600
var scale = d3.scaleLog()
  .domain([1, 1000000])
  .range([0, 600]);

console.log(scale(1)) //0
console.log(scale(10)) //37.66
console.log(scale(100)) //75.32
console.log(scale(1000)) //112.98
console.log(scale(10000)) //150.64
console.log(scale(100000)) //188.3
console.log(scale(1000000)) //225.96

d3.scalePow()

返回一个幂比例尺，该尺度将输入域中的值通过一次幂映射到输出域中的值。此尺度类似于线性缩放，但受到“指数”的放大或缩小。我们可以将这个尺度视作一种在输入域上执行的指数函数。

Input

• domain: 一个数组，包含两个或多个有序的数字。默认值为[0,1]。
• range: 一个数组，包含两个或多个有序的数字，表示输出域的范围。默认值为[0,1]。
• exponent: 幂指数。默认值为1。
• interpolate: 插值函数，默认为d3.interpolate。
• clamp: 是否保留一个值的范围在输出范围之内，而不是将值严格限制在范围之内。默认为false。

Output

一个转换函数，用于将输入域中任意值映射到输出域中的任意值。

示例

var scale = d3.scalePow()
  .exponent(2)
  .domain([0, 1])
  .range([0, 10]);

console.log(scale(0.5)); // 5

d3.scaleSqrt()

返回一个平方根比例尺，该尺度将输入域中的值通过平方根映射到输出域中的值。此尺度类似于线性缩放，但受到“平方根”的放大或缩小。我们可以将这个尺度视作一种在输入域上执行的指数函数。

Input

• domain: 一个数组，包含两个或多个有序的数字。默认值为[0,1]。
• range: 一个数组，包含两个或多个有序的数字，表示输出域的范围。默认值为[0,1]。
• interpolate: 插值函数，默认为d3.interpolate。
• clamp: 是否保留一个值的范围在输出范围之内，而不是将值严格限制在范围之内。默认为false。

Output

一个转换函数，用于将输入域中任意值映射到输出域中的任意值。

示例

var scale = d3.scaleSqrt()
  .domain([0, 100])
  .range([0, 10]);

console.log(scale(50)); // 7.071

d3.scaleQuantize()

返回一个分段线性比例尺，该尺度将输入域中的值分段均分到输出域中，然后将输入值截取到最接近的输出值。

Input

• domain: 数组，包含两个或多个有序的数字。默认值为[0,1]。
• range: 数组，包含任意个有序的数值。默认值为[0,1]。
• interpolate: 插值函数，默认值为d3.interpolate。
• clamp: 是否保留一个值的范围在输出范围之内，而不是将值严格限制在范围之内。默认为false。

Output

一个转换函数，用于将输入域中任意值映射到输出域中的任意值。

示例

var scale = d3.scaleQuantize()
  .domain([0, 10])
  .range(["red", "green", "blue"]);

console.log(scale(3)); // "green"

d3.scaleQuantile()

返回一个分位比例尺，该尺度将输入域分段分配到输出域中。分位数是由输入域内数据的排列顺序决定的。

Input

• domain: 数组，包含任意数量有序的数值。
• range: 数组，包含任意数量的离散值或颜色
• interpolate: 插值函数，默认为d3.interpolate。
• clamp: 是否保留一个值的范围在输出范围之内，而不是将值严格限制在范围之内。默认为false。

Output

一个转换函数，用于将输入域中任意值映射到输出域中的任意值。

示例

function makeData() {
  return Array.from({length: 15}, () => Math.floor(Math.random() * 100));
}

var data = makeData();

var scale = d3.scaleQuantile()
  .domain(data)
  .range(["red", "green", "blue"]);

console.log(scale(20)); // "red"
console.log(scale(50)); // "green"
console.log(scale(80)); // "blue"

总结

D3.js连续比例尺是可视化和交互式图表中非常有用的工具。无论其对于连续或离散的域，都可以映射输入域中的数据到输出域上。在本文中，我们介绍了D3.js的所有连续尺度。每种连续尺度都有不同的参数选项，可以在尺度转换时控制一些关键的因素。