D3

量化尺度 ​

🌐 Quantize scales

量化刻度类似于线性刻度，只是它们使用离散而非连续的范围。连续的输入域根据输出范围中的值的数量（即基数）被划分为均匀的片段。每个范围值 y 可以表示为域值 x 的量化线性函数：y = m round(x) + b。参见量化分级地图 了解示例。

🌐 Quantize scales are similar to linear scales, except they use a discrete rather than continuous range. The continuous input domain is divided into uniform segments based on the number of values in (i.e., the cardinality of) the output range. Each range value y can be expressed as a quantized linear function of the domain value x: y = m round(x) + b. See the quantized choropleth for an example.

scaleQuantize(domain, range) ​

示例 · 来源 · 使用指定的域和范围构建新的量化比例。

js
const color = d3.scaleQuantize([0, 100], d3.schemeBlues[9]);

如果未指定 domain 或 range，每个默认为 [0, 1]。

🌐 If either domain or range is not specified, each defaults to [0, 1].

js
const color = d3.scaleQuantize(d3.schemeBlues[9]);

量化(值) ​

🌐 quantize(value)

示例 · 来源 · 给定输入域中的一个值，返回输出范围中的对应值。例如，要应用颜色编码：

js
const color = d3.scaleQuantize([0, 1], ["brown", "steelblue"]);
color(0.49); // "brown"
color(0.51); // "steelblue"

或者将区域划分为三个大小相等、范围值不同的部分，以计算合适的笔触宽度：

🌐 Or dividing the domain into three equally-sized parts with different range values to compute an appropriate stroke width:

js
const width = d3.scaleQuantize([10, 100], [1, 2, 4]);
width(20); // 1
width(50); // 2
width(80); // 4

quantize.invertExtent(value) ​

示例 · 来源 · 返回值域中对应 value 在定义域 [x0, x1]中的值范围：quantize 的逆操作。该方法在交互中非常有用，例如用来确定与鼠标下像素位置对应的定义域中的值。

js
const width = d3.scaleQuantize([10, 100], [1, 2, 4]);
width.invertExtent(2); // [40, 70]

quantize.domain(domain) ​

示例 · 来源 · 如果指定了 domain，将刻度的域设置为指定的两个元素的数字数组。

js
const color = d3.scaleQuantize(d3.schemeBlues[9]);
color.domain([0, 100]);

如果给定数组中的元素不是数字，它们将被强制转换为数字。数字必须按升序排列，否则刻度的行为将是未定义的。

🌐 If the elements in the given array are not numbers, they will be coerced to numbers. The numbers must be in ascending order or the behavior of the scale is undefined.

如果未指定 domain，则返回刻度当前的域。

🌐 If domain is not specified, returns the scale’s current domain.

js
color.domain() // [0, 100]

quantize.range(range) ​

示例 · 来源 · 如果指定了range，则将刻度的范围设置为指定的值数组。

js
const color = d3.scaleQuantize();
color.range(d3.schemeBlues[5]);

数组可以包含任意数量的离散值。给定数组中的元素不必是数字；任何值或类型都可以。

🌐 The array may contain any number of discrete values. The elements in the given array need not be numbers; any value or type will work.

如果未指定 range，则返回刻度当前的范围。

🌐 If range is not specified, returns the scale’s current range.

js
color.range() // ["#eff3ff", "#bdd7e7", "#6baed6", "#3182bd", "#08519c"]

quantize.thresholds() ​

示例 · 来源 · 返回 域 内计算阈值的数组。

js
color.thresholds() // [0.2, 0.4, 0.6, 0.8]

返回的阈值数量比range的长度少一：小于第一个阈值的值被分配到范围的第一个元素，而大于或等于最后一个阈值的值被分配到范围的最后一个元素。

🌐 The number of returned thresholds is one less than the length of the range: values less than the first threshold are assigned the first element in the range, whereas values greater than or equal to the last threshold are assigned the last element in the range.

quantize.copy() ​

示例 · 来源 · 返回此刻度的精确副本。

js
const c1 = d3.scaleQuantize(d3.schemeBlues[5]);
const c2 = c1.copy();

更改此比例不会影响返回的比例，反之亦然。

🌐 Changes to this scale will not affect the returned scale, and vice versa.