D3比例尺接口翻译：深入解析scaleLinear、scaleLog、scalePoint等比例尺的函数作用

引言

在数据可视化中，比例尺扮演着重要角色，它将数据值映射到图形元素的视觉属性，如位置、大小、颜色等，从而使数据更直观地呈现出来。D3.js提供了丰富的比例尺接口，满足各种数据可视化需求。本文将对这些比例尺接口进行详细介绍，帮助您掌握比例尺的用法和技巧，从而创建出更出色的数据可视化作品。

1. scaleLinear：线性比例尺

scaleLinear是D3.js中最常用的比例尺，它将连续的数值映射到连续的范围内。可以使用scaleLinear()函数来创建线性比例尺，并指定其输入和输出范围。例如：

var xScale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, 500]);

在这个例子中，xScale将输入范围[0, 100]映射到输出范围[0, 500]。这意味着输入值0将映射到输出值0，输入值100将映射到输出值500。介于0和100之间的输入值将映射到介于0和500之间的输出值。

scaleLinear提供了许多有用的函数，可以用来操作比例尺。例如：

• scaleLinear.domain()： 获取或设置比例尺的输入范围。
• scaleLinear.range()： 获取或设置比例尺的输出范围。
• scaleLinear.invert()： 将输出值反向映射回输入值。
• scaleLinear.clamp()： 是否将输出值限制在输出范围之内。

2. scaleLog：对数比例尺

scaleLog是另一种常用的比例尺，它将连续的数值映射到对数范围内。可以使用scaleLog()函数来创建对数比例尺，并指定其输入和输出范围。例如：

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

在这个例子中，xScale将输入范围[1, 100]映射到输出范围[0, 500]。这意味着输入值1将映射到输出值0，输入值100将映射到输出值500。介于1和100之间的输入值将映射到介于0和500之间的输出值。

scaleLog提供了与scaleLinear类似的函数，可以用来操作比例尺。

3. scalePoint：点比例尺

scalePoint将离散值映射到离散的范围内。可以使用scalePoint()函数来创建点比例尺，并指定其输入和输出范围。例如：

var xScale = d3.scalePoint()
  .domain(["A", "B", "C"])
  .range([0, 500]);

在这个例子中，xScale将输入范围["A", "B", "C"]映射到输出范围[0, 500]。这意味着输入值"A"将映射到输出值0，输入值"B"将映射到输出值250，输入值"C"将映射到输出值500。

scalePoint提供了与scaleLinear类似的函数，可以用来操作比例尺。

4. scaleBand：带状比例尺

scaleBand与scalePoint类似，但它将离散值映射到连续的范围内。可以使用scaleBand()函数来创建带状比例尺，并指定其输入和输出范围。例如：

var xScale = d3.scaleBand()
  .domain(["A", "B", "C"])
  .range([0, 500])
  .padding(0.1);

在这个例子中，xScale将输入范围["A", "B", "C"]映射到输出范围[0, 500]。这意味着输入值"A"将映射到输出范围[0, 167)，输入值"B"将映射到输出范围[167, 333)，输入值"C"将映射到输出范围[333, 500)。padding参数指定了带状之间的间距。

scaleBand提供了与scaleLinear类似的函数，可以用来操作比例尺。

5. scaleOrdinal：序数比例尺

scaleOrdinal将离散值映射到离散的范围内，但它与scalePoint不同的是，它可以处理重复的值。可以使用scaleOrdinal()函数来创建序数比例尺，并指定其输入和输出范围。例如：

var xScale = d3.scaleOrdinal()
  .domain(["A", "B", "C"])
  .range(["red", "green", "blue"]);

在这个例子中，xScale将输入范围["A", "B", "C"]映射到输出范围["red", "green", "blue"]。这意味着输入值"A"将映射到输出值"red"，输入值"B"将映射到输出值"green"，输入值"C"将映射到输出值"blue"。如果输入值重复，则输出值将是相同的。

scaleOrdinal提供了与scaleLinear类似的函数，可以用来操作比例尺。

6. scaleQuantize：量化比例尺

scaleQuantize将连续的数值映射到离散的范围内。可以使用scaleQuantize()函数来创建量化比例尺，并指定其输入和输出范围。例如：

var xScale = d3.scaleQuantize()
  .domain([0, 100])
  .range(["red", "orange", "yellow", "green", "blue"]);

在这个例子中，xScale将输入范围[0, 100]映射到输出范围["red", "orange", "yellow", "green", "blue"]。这意味着输入值0将映射到输出值"red"，输入值25将映射到输出值"orange"，输入值50将映射到输出值"yellow"，输入值75将映射到输出值"green"，输入值100将映射到输出值"blue"。介于0和100之间的输入值将映射到介于"red"和"blue"之间的输出值。

scaleQuantize提供了与scaleLinear类似的函数，可以用来操作比例尺。

7. scaleQuantile：分位比例尺

scaleQuantile将连续的数值映射到离散的范围内，但它与scaleQuantize不同的是，它将输入值分成相等的分位数。可以使用scaleQuantile()函数来创建分位比例尺，并指定其输入和输出范围。例如：

var xScale = d3.scaleQuantile()
  .domain([0, 100])
  .range(["red", "orange", "yellow", "green", "blue"]);

在这个例子中，xScale将输入范围[0, 100]分成5个相等的分位数，并将这些分位数映射到输出范围["red", "orange", "yellow", "green", "blue"]。这意味着输入值0将映射到输出值"red"，输入值20将映射到输出值"orange"，输入值40将映射到输出值"yellow"，输入值60将映射到输出值"green"，输入值80将映射到输出值"blue"，输入值100将映射到输出值"blue"。介于0和100之间的输入值将映射到介于"red"和"blue"之间的输出值。

scaleQuantile提供了与scaleLinear类似的函数，可以用来操作比例尺。

8. scaleThreshold：阈值比例尺

scaleThreshold将连续的数值映射到离散的范围内，但它与scaleQuantize和scaleQuantile不同的是，它将输入值分成相等的阈值。可以使用scaleThreshold()函数来创建阈值比例尺，并指定其输入和输出范围。例如：

var xScale = d3.scaleThreshold()
  .domain([0, 25, 50, 75, 100])
  .range(["red", "orange", "yellow", "green", "blue"]);

在这个例子中，xScale将输入范围[0, 100]分成5个相等的阈值，并将这些阈值映射到输出范围["red", "orange", "yellow", "green", "blue"]。这意味着输入值0将映射到输出值"red"，输入值25将映射到输出值"orange"，输入值