带尺度
¥Band scales
带状比例尺与 序数尺度 类似,但输出范围是连续的数值。比例将连续范围划分为均匀的带。带状比例尺通常用于具有序数或分类维度的条形图。
¥Band scales are like ordinal scales except the output range is continuous and numeric. The scale divides the continuous range into uniform bands. Band scales are typically used for bar charts with an ordinal or categorical dimension.
scaleBand(domain, range)
示例 · 源代码 · 使用指定的 domain 和 range、无 padding、无 rounding 以及中心 alignment 构造一个新的带状比例尺。
¥Examples · Source · Constructs a new band scale with the specified domain and range, no padding, no rounding and center alignment.
const x = d3.scaleBand(["a", "b", "c"], [0, 960]);
如果指定了单个参数,则将其解释为范围。如果未指定域,则默认为空域。如果未指定范围,则默认为单位范围 [0, 1]。
¥If a single argument is specified, it is interpreted as the range. If domain is not specified, it defaults to the empty domain. If range is not specified, it defaults to the unit range [0, 1].
band(value) {#_band}
示例 · 源代码 · 给定输入 domain 中的值,返回输出 range 中的对应波段的起始位置。
¥Examples · Source · Given a value in the input domain, returns the start of the corresponding band derived from the output range.
const x = d3.scaleBand(["a", "b", "c"], [0, 960]);
x("a"); // 0
x("b"); // 320
x("c"); // 640
x("d"); // undefined
如果给定值不在比例尺的域中,则返回 undefined。
¥If the given value is not in the scale’s domain, returns undefined.
band.domain(domain) {#band_domain}
示例 · 源代码 · 如果指定了域,则将域设置为指定的值数组并返回此比例尺。
¥Examples · Source · If domain is specified, sets the domain to the specified array of values and returns this scale.
const x = d3.scaleBand([0, 960]).domain(["a", "b", "c", "d", "e", "f"]);
域中的第一个元素将映射到第一个波段,第二个域值映射到第二个波段,依此类推。域值内部存储在 InternMap 中,从原始值到索引;然后使用生成的索引确定带区。因此,带比例尺的值必须可强制转换为原始值,并且原始域值唯一地标识相应的带。如果未指定域,则此方法返回当前域。
¥The first element in domain will be mapped to the first band, the second domain value to the second band, and so on. Domain values are stored internally in an InternMap from primitive value to index; the resulting index is then used to determine the band. Thus, a band scale’s values must be coercible to a primitive value, and the primitive domain value uniquely identifies the corresponding band. If domain is not specified, this method returns the current domain.
band.range(range) {#band_range}
示例 · 源代码 · 如果指定了 range,则将比例尺的范围设置为指定的二元素数字数组并返回此比例尺。
¥Examples · Source · If range is specified, sets the scale’s range to the specified two-element array of numbers and returns this scale.
const x = d3.scaleBand().range([0, 960]);
如果给定数组中的元素不是数字,则它们将被强制转换为数字。如果未指定 range,则返回比例尺的当前范围,默认为 [0, 1]。
¥If the elements in the given array are not numbers, they will be coerced to numbers. If range is not specified, returns the scale’s current range, which defaults to [0, 1].
band.rangeRound(range) {#band_rangeRound}
示例 · 源代码 · 将比例尺的 range 设置为指定的二元素数字数组,同时启用 rounding;返回此比例尺。
¥Examples · Source · Sets the scale’s range to the specified two-element array of numbers while also enabling rounding; returns this scale.
const x = d3.scaleBand().rangeRound([0, 960]);
这是一个便捷的方法,相当于:
¥This is a convenience method equivalent to:
band.range(range).round(true)
舍入有时有助于避免抗锯齿伪影,但也要考虑 shape-rendering 的“crispEdges”样式。
¥Rounding is sometimes useful for avoiding antialiasing artifacts, though also consider the shape-rendering “crispEdges” styles.
band.round(round) {#band_round}
示例 · 源代码 · 如果指定了 round,则相应地启用或禁用舍入并返回此比例尺。
¥Examples · Source · If round is specified, enables or disables rounding accordingly and returns this scale.
const x = d3.scaleBand(["a", "b", "c"], [0, 960]).round(false);
如果未指定 round,则返回舍入是否启用。
¥If round is not specified, returns whether rounding is enabled.
x.round() // false
如果启用了舍入,则每个带区的起始和终止位置将为整数。舍入有时有助于避免抗锯齿伪影,但也要考虑 shape-rendering 的“crispEdges”样式。请注意,如果域的宽度不是范围基数的倍数,即使没有填充,也可能存在剩余的未使用空间!Use band.align to specify how the leftover space is distributed.
¥If rounding is enabled, the start and stop of each band will be integers. Rounding is sometimes useful for avoiding antialiasing artifacts, though also consider the shape-rendering “crispEdges” styles. Note that if the width of the domain is not a multiple of the cardinality of the range, there may be leftover unused space, even without padding! Use band.align to specify how the leftover space is distributed.
band.paddingInner(padding) {#band_paddingInner}
示例 · 源代码 · 如果指定了 padding 参数,则将内部填充设置为指定的数字(该数字必须小于或等于 1),并返回此比例尺。
¥Examples · Source · If padding is specified, sets the inner padding to the specified number which must be less than or equal to 1 and returns this scale.
const x = d3.scaleBand(["a", "b", "c"], [0, 960]).paddingInner(0.1);
如果未指定 padding,则返回当前内边距,默认为 0。
¥If padding is not specified, returns the current inner padding which defaults to 0.
x.paddingInner() // 0.1
内边距指定了在带状区域之间保留空白的范围比例;0 表示波段之间没有空白,1 表示 bandwidth 为零。
¥The inner padding specifies the proportion of the range that is reserved for blank space between bands; a value of 0 means no blank space between bands, and a value of 1 means a bandwidth of zero.
band.paddingOuter(padding) {#band_paddingOuter}
示例 · 源代码 · 如果指定了 padding 参数,则将外部填充设置为指定的数字(该数字通常在 [0, 1] 范围内),并返回此比例尺。
¥Examples · Source · If padding is specified, sets the outer padding to the specified number which is typically in the range [0, 1] and returns this scale.
const x = d3.scaleBand(["a", "b", "c"], [0, 960]).paddingOuter(0.1);
如果未指定 padding,则返回当前外边距,默认为 0。
¥If padding is not specified, returns the current outer padding which defaults to 0.
x.paddingOuter() // 0.1
外部填充指定在第一个带区之前和最后一个带区之后保留的空白空间量,以 step 的倍数表示。
¥The outer padding specifies the amount of blank space, in terms of multiples of the step, to reserve before the first band and after the last band.
band.padding(padding) {#band_padding}
示例 · 源代码 · 一种将 inner 和 outer 填充设置为相同填充值的便捷方法。
¥Examples · Source · A convenience method for setting the inner and outer padding to the same padding value.
const x = d3.scaleBand(["a", "b", "c"], [0, 960]).padding(0.1);
如果未指定 padding,则返回内部 padding。
¥If padding is not specified, returns the inner padding.
x.padding() // 0.1
band.align(align) {#band_align}
示例 · 源代码 · 如果指定了 align,则将对齐方式设置为指定的值,该值必须在 [0, 1] 范围内,并返回此比例。
¥Examples · Source · If align is specified, sets the alignment to the specified value which must be in the range [0, 1], and returns this scale.
const x = d3.scaleBand(["a", "b", "c"], [0, 960]).align(0.5);
如果未指定对齐方式,则返回当前对齐方式,默认为 0.5。
¥If align is not specified, returns the current alignment which defaults to 0.5.
x.align() // 0.5
对齐指定了外部填充在范围内的分布方式。值 0.5 表示外部填充应均匀分布在第一个带区之前和最后一个带区之后;即,带区应位于范围内的中心。可以使用 0 或 1 值将带区移到一侧,例如,将它们放置在与轴相邻的位置。更多信息,请参阅 查看此解释器。
¥The alignment specifies how outer padding is distributed in the range. A value of 0.5 indicates that the outer padding should be equally distributed before the first band and after the last band; i.e., the bands should be centered within the range. A value of 0 or 1 may be used to shift the bands to one side, say to position them adjacent to an axis. For more, see this explainer.
band.bandwidth() {#band_bandwidth}
¥Examples · Source · Returns the width of each band.
x.bandwidth() // 50.8235294117647
band.step() {#band_step}
¥Examples · Source · Returns the distance between the starts of adjacent bands.
x.step() // 63.529411764705884
band.copy() {#band_copy}
¥Examples · Source · Returns an exact copy of this scale.
const x1 = d3.scaleBand(["a", "b", "c"], [0, 960]);
const x2 = x1.copy();
更改此比例不会影响返回的比例,反之亦然。
¥Changes to this scale will not affect the returned scale, and vice versa.