数据可视化: D3.js 核心概念 - 比例尺 (一)

数据可视化是将抽象数据以图形的方式呈现，以便于理解和分析。D3.js 是一个流行的 JavaScript 库，可帮助我们创建交互式数据可视化。D3.js 的 d3-scale 模块提供了一系列比例尺，用于将抽象数据转换为图形符号的某种属性，比如位置、大小、颜色等。

比例尺可以分为两大类：适用于定义域为连续型的比例尺和适用于定义域为离散型的比例尺。本文主要介绍适用于定义域为连续型的比例尺。

1. 线性比例尺

线性比例尺是最常见的比例尺，它将一个连续的定义域线性映射到一个连续的范围。可以使用 d3.scaleLinear() 函数创建线性比例尺。

var linearScale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, 10]);

这个比例尺将定义域中的值从 0 到 100 线性映射到范围中的值从 0 到 10。例如，比例尺将定义域中的值 50 映射到范围中的值 5。

2. 对数比例尺

对数比例尺将一个连续的定义域对数映射到一个连续的范围。可以使用 d3.scaleLog() 函数创建对数比例尺。

var logScale = d3.scaleLog()
  .domain([1, 100])
  .range([0, 10]);

这个比例尺将定义域中的值从 1 到 100 对数映射到范围中的值从 0 到 10。例如，比例尺将定义域中的值 10 映射到范围中的值 1。

3. 时间比例尺

时间比例尺将一个连续的时间定义域映射到一个连续的范围。可以使用 d3.scaleTime() 函数创建时间比例尺。

var timeScale = d3.scaleTime()
  .domain([new Date(2020, 0, 1), new Date(2021, 0, 1)])
  .range([0, 10]);

这个比例尺将定义域中的时间从 2020 年 1 月 1 日到 2021 年 1 月 1 日映射到范围中的值从 0 到 10。例如，比例尺将定义域中的时间 2020 年 7 月 1 日映射到范围中的值 5。

4. 阈值比例尺

阈值比例尺将一个连续的定义域映射到一个离散的范围。可以使用 d3.scaleThreshold() 函数创建阈值比例尺。

var thresholdScale = d3.scaleThreshold()
  .domain([0, 50, 100])
  .range(["low", "medium", "high"]);

这个比例尺将定义域中的值从 0 到 100 映射到范围中的值 "low", "medium" 和 "high"。例如，比例尺将定义域中的值 25 映射到范围中的值 "low"。

5. 度量比例尺

度量比例尺将一个连续的定义域映射到一个连续的范围，并且范围中的值与定义域中的值成比例。可以使用 d3.scaleQuantile() 函数创建度量比例尺。

var quantileScale = d3.scaleQuantile()
  .domain([0, 100])
  .range([0, 10]);

这个比例尺将定义域中的值从 0 到 100 映射到范围中的值从 0 到 10，并且范围中的值与定义域中的值成比例。例如，比例尺将定义域中的值 50 映射到范围中的值 5。

6. 形状比例尺

形状比例尺将一个连续的定义域映射到一个离散的范围，并且范围中的值与定义域中的值成比例。可以使用 d3.scaleSymbol() 函数创建形状比例尺。

var symbolScale = d3.scaleSymbol()
  .domain([0, 100])
  .range(["circle", "square", "triangle"]);

这个比例尺将定义域中的值从 0 到 100 映射到范围中的值 "circle", "square" 和 "triangle"，并且范围中的值与定义域中的值成比例。例如，比例尺将定义域中的值 50 映射到范围中的值 "square"。

7. 颜色比例尺

颜色比例尺将一个连续的定义域映射到一个连续的范围，并且范围中的值与定义域中的值成比例。可以使用 d3.scaleSequential() 或 d3.scaleDiverging() 函数创建颜色比例尺。

var sequentialScale = d3.scaleSequential()
  .domain([0, 100])
  .range(["#0000FF", "#FF0000"]);

var divergingScale = d3.scaleDiverging()
  .domain([-100, 0, 100])
  .range(["#00FF00", "#0000FF", "#FF0000"]);

这两个比例尺将定义域中的值从 0 到 100 映射到范围中的颜色，并且范围中的颜色与定义域中的值成比例。例如，比例尺将定义域中的值 50 映射到范围中的颜色 #808080。

这些只是 D3.js 中比例尺的几个例子。D3.js 还提供了许多其他类型的比例尺，可以满足不同的需求。