带尺度
🌐 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)
示例 · 来源 · 构建一个具有指定域和范围的新带状比例,没有填充,没有舍入,并采用中心对齐。
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)
示例 · 来源 · 给定输入域中的一个值,返回从输出范围派生的相应区段的起点。
const x = d3.scaleBand(["a", "b", "c"], [0, 960]);
x("a"); // 0
x("b"); // 320
x("c"); // 640
x("d"); // undefined如果给定的值不在量表的定义域内,则返回未定义。
🌐 If the given value is not in the scale’s domain, returns undefined.
band.domain(domain)
示例 · 来源 · 如果指定了domain,将域设置为指定的值数组并返回此比例。
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)
示例 · 来源 · 如果指定了 range,将刻度的范围设置为指定的两个元素的数字数组,并返回该刻度。
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)
示例 · 来源 · 将量表的范围设置为指定的两个元素的数字数组,同时启用四舍五入;返回此量表。
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)
示例 · 来源 · 如果指定了 round,则相应地启用或禁用四舍五入并返回此刻度。
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”样式。请注意,如果域的宽度不是范围基数的倍数,即使没有填充,也可能会有剩余的未使用空间!使用 band.align 来指定剩余空间的分配方式。
🌐 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)
示例 · 来源 · 如果指定了padding,则将内部填充设置为指定的数字,该数字必须小于或等于1,并返回此比例。
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 表示 带宽 为零。
🌐 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)
示例 · 来源 · 如果指定了padding,则将外边距设置为指定的数字,该数字通常在[0, 1]范围内,并返回此比例。
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外部填充指定在第一个频带之前和最后一个频带之后保留的空白空间量,以步长的倍数表示。
🌐 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)
示例 · 来源 · 一个用于将内和外填充设置为相同padding值的便利方法。
const x = d3.scaleBand(["a", "b", "c"], [0, 960]).padding(0.1);如果未指定padding,则返回内部填充。
🌐 If padding is not specified, returns the inner padding.
x.padding() // 0.1band.align(align)
示例 · 来源 · 如果指定了 align,则将对齐方式设置为指定的值,该值必须在 [0, 1] 范围内,并返回该比例。
const x = d3.scaleBand(["a", "b", "c"], [0, 960]).align(0.5);如果未指定 align,则返回当前对齐方式,默认值为 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()
x.bandwidth() // 50.8235294117647band.step()
x.step() // 63.529411764705884band.copy()
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.