带状比例尺

带状比例尺类似于 序数比例尺，但输出范围是连续的数值范围。比例尺将连续范围划分为均匀的带状区域。带状比例尺通常用于具有序数或分类维度的条形图。

scaleBand(domain, range)

示例 · 源代码 · 使用指定的 domain 和 range 创建一个新的带状比例尺，不带 填充，不带 舍入，且中心 对齐。

const x = d3.scaleBand(["a", "b", "c"], [0, 960]);

如果指定了单个参数，则将其解释为 range。如果未指定 domain，则默认值为空域。如果未指定 range，则默认值为单位范围 [0, 1]。

band(value)

示例 · 源代码 · 给定输入 domain 中的 value，返回根据输出 range 导出的对应带状区域的起点。

const x = d3.scaleBand(["a", "b", "c"], [0, 960]);
x("a"); // 0
x("b"); // 320
x("c"); // 640
x("d"); // undefined

如果给定的 value 不在比例尺的域中，则返回 undefined。

band.domain(domain)

域

示例 · 源代码 · 如果指定了 domain，则将域设置为指定的值数组并返回此比例尺。

const x = d3.scaleBand([0, 960]).domain(["a", "b", "c", "d", "e", "f"]);

domain 中的第一个元素将映射到第一个带状区域，第二个域值映射到第二个带状区域，以此类推。域值在内部存储在一个 InternMap 中，该映射将原始值映射到索引；然后使用生成的索引来确定带状区域。因此，带状比例尺的值必须可以强制转换为原始值，并且原始域值唯一标识对应带状区域。如果未指定 domain，则此方法返回当前域。

band.range(range)

示例 · 源代码 · 如果指定了 range，则将比例尺的范围设置为指定的两个元素的数字数组并返回此比例尺。

const x = d3.scaleBand().range([0, 960]);

如果给定数组中的元素不是数字，则它们将被强制转换为数字。如果未指定 range，则返回比例尺的当前范围，默认值为 [0, 1]。

band.rangeRound(range)

示例 · 源代码 · 将比例尺的 range 设置为指定的两个元素的数字数组，同时启用 舍入；返回此比例尺。

const x = d3.scaleBand().rangeRound([0, 960]);

此方法是以下代码的便利方法

band.range(range).round(true)

舍入有时有助于避免抗锯齿伪影，但也要考虑 shape-rendering 的“crispEdges”样式。

band.round(round)

舍入

示例 · 源代码 · 如果指定了 round，则根据情况启用或禁用舍入并返回此比例尺。

const x = d3.scaleBand(["a", "b", "c"], [0, 960]).round(false);

如果未指定 round，则返回是否启用了舍入。

x.round() // false

如果启用了舍入，则每个带状区域的起点和终点将是整数。舍入有时有助于避免抗锯齿伪影，但也要考虑 shape-rendering 的“crispEdges”样式。请注意，如果域的宽度不是范围基数的倍数，即使没有填充，也可能存在多余的未用空间！使用 band.align 指定如何分配多余的空间。

band.paddingInner(padding)

内部填充0.10

示例 · 源代码 · 如果指定了 padding，则将内部填充设置为指定的值，该值必须小于或等于 1，并返回此比例尺。

const x = d3.scaleBand(["a", "b", "c"], [0, 960]).paddingInner(0.1);

如果未指定 padding，则返回当前内部填充，默认值为 0。

x.paddingInner() // 0.1

内部填充指定为带状区域之间的空白空间保留的范围比例；值 0 表示带状区域之间没有空白空间，值 1 表示 带宽 为零。

band.paddingOuter(padding)

外部填充0.10

示例 · 源代码 · 如果指定了 padding，则将外部填充设置为指定的值，该值通常在 [0, 1] 范围内，并返回此比例尺。

const x = d3.scaleBand(["a", "b", "c"], [0, 960]).paddingOuter(0.1);

如果未指定 padding，则返回当前外部填充，默认值为 0。

x.paddingOuter() // 0.1

外部填充指定为第一个带状区域之前和最后一个带状区域之后保留的空白空间量，以 步长 的倍数表示。

band.padding(padding)

填充0.10

示例 · 源代码 · 一种便利方法，用于将 内部 和 外部 填充设置为相同的 padding 值。

const x = d3.scaleBand(["a", "b", "c"], [0, 960]).padding(0.1);

如果未指定 padding，则返回内部填充。

x.padding() // 0.1

band.align(align)

对齐0.50

示例 · 源代码 · 如果指定了 align，则将对齐设置为指定的值，该值必须在 [0, 1] 范围内，并返回此比例尺。

const x = d3.scaleBand(["a", "b", "c"], [0, 960]).align(0.5);

如果未指定 align，则返回当前对齐，默认值为 0.5。

x.align() // 0.5

对齐指定外部填充在范围内的分配方式。值 0.5 表示外部填充应在第一个带状区域之前和最后一个带状区域之后均匀分配；即，带状区域应在范围内居中。值 0 或 1 可用于将带状区域移至一侧，例如将它们放置在轴的旁边。了解更多信息，请 参阅此解释器。

band.bandwidth()

示例 · 源代码 · 返回每个带状区域的宽度。

x.bandwidth() // 50.8235294117647

band.step()

示例 · 源代码 · 返回相邻带状区域起点之间的距离。

x.step() // 63.529411764705884

band.copy()

示例 · 源代码 · 返回此比例尺的完全副本。

const x1 = d3.scaleBand(["a", "b", "c"], [0, 960]);
const x2 = x1.copy();

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