d3-axis
轴组件呈现可供人类阅读的位置参考标记 比例。它可以与大多数比例类型一起使用，包括线性、对数、带状和时间比例，如上所示。
🌐 The axis component renders human-readable reference marks for position scales. It works with most scale types, including linear, log, band, and time scales as shown above.
在 SVG 容器的选择（通常是单个 G 元素）上调用轴组件会填充轴。轴会在原点渲染。要更改轴相对于图表的位置，请在包含元素上指定transform 属性。
🌐 Calling the axis component on a selection of SVG containers (usually a single G element) populates the axes. Axes are rendered at the origin. To change the position of the axis with respect to the chart, specify a transform attribute on the containing element.
const gx = svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x));如果比例发生了变化，请第二次调用轴组件以进行更新。对于平滑动画，你可以在 transition 上调用它。
🌐 If the scale has changed, call the axis component a second time to update. For smooth animations, you can call it on a transition.
gx.transition()
.duration(750)
.call(d3.axisBottom(x));由轴创建的元素被视为其公共 API 的一部分。你可以应用外部样式表或修改生成的轴元素以自定义轴的外观。一个轴由一个类为“domain”的path 元素组成，表示标度域的范围，其后是类为“tick”的经过变换的g 元素，表示标度的每个刻度。每个刻度都有一个line 元素用于绘制刻度线，以及一个text 元素用于刻度标签。例如，下面是一个典型的底部轴：
🌐 The elements created by the axis are considered part of its public API. You can apply external stylesheets or modify the generated axis elements to customize the axis appearance. An axis consists of a path element of class “domain” representing the extent of the scale’s domain, followed by transformed g elements of class “tick” representing each of the scale’s ticks. Each tick has a line element to draw the tick line, and a text element for the tick label. For example, here is a typical bottom-oriented axis:
<g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
<path class="domain" stroke="currentColor" d="M0.5,6V0.5H880.5V6"></path>
<g class="tick" opacity="1" transform="translate(0.5,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">0.0</text>
</g>
<g class="tick" opacity="1" transform="translate(176.5,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">0.2</text>
</g>
<g class="tick" opacity="1" transform="translate(352.5,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">0.4</text>
</g>
<g class="tick" opacity="1" transform="translate(528.5,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">0.6</text>
</g>
<g class="tick" opacity="1" transform="translate(704.5,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">0.8</text>
</g>
<g class="tick" opacity="1" transform="translate(880.5,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">1.0</text>
</g>
</g>轴的方向是固定的；要改变方向，需要移除旧轴并创建新轴。
🌐 The orientation of an axis is fixed; to change the orientation, remove the old axis and create a new axis.
axisTop(scale)
Source · 为给定的 scale 构造一个新的顶部向轴生成器，使用空的 tick arguments，tick size 为 6，padding 为 3。在此方向上，刻度将绘制在水平域路径的上方。
axisRight(scale)
来源 · 为给定的比例尺构建一个新的右侧轴生成器，具有空的刻度参数、刻度大小为6和间距为3。在这种方向下，刻度绘制在垂直定义域路径的右侧。
axisBottom(scale)
来源 · 为给定的 scale 构建一个新的底部轴生成器，使用空的 刻度参数、刻度大小 为 6 和 内边距 为 3。在这种方向下，刻度绘制在水平域路径的下方。
axisLeft(scale)
来源 · 为给定的比例尺构建一个新的左侧轴生成器，具有空的刻度参数、刻度大小为6和间距为3。在这种方向下，刻度绘制在垂直域路径的左侧。
轴(上下文)
🌐 axis(context)
来源 · 将轴渲染到给定的上下文，该上下文可以是 SVG 容器（SVG 或 G 元素）的选择或相应的过渡。
svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x));轴.刻度(刻度)
🌐 axis.scale(scale)
来源 · 如果指定了 scale，则设置刻度并返回坐标轴。如果未指定 scale，则返回当前刻度。
const xAxis = d3.axisBottom().scale(x);axis.ticks(...参数)
🌐 axis.ticks(...arguments)
设置在轴渲染时将传递给 scale.ticks 和 scale.tickFormat 的 参数，并返回轴生成器。
🌐 Sets the arguments that will be passed to scale.ticks and scale.tickFormat when the axis is rendered, and returns the axis generator.
参数 的含义取决于 坐标轴刻度 的类型：最常见的是，参数表示刻度数量的建议 数量（或者对于时间刻度，是一个 时间 间隔），以及一个可选的 格式 说明符 来自定义刻度值的格式。例如，要在线性刻度上生成二十个带有 SI 前缀格式的刻度，可以这样说：
🌐 The meaning of the arguments depends on the axis’ scale type: most commonly, the arguments are a suggested count for the number of ticks (or a time interval for time scales), and an optional format specifier to customize how the tick values are formatted. For example, to generate twenty ticks with SI-prefix formatting on a linear scale, say:
axis.ticks(20, "s");要每十五分钟生成一次带有时间刻度的刻度，例如：
🌐 To generate ticks every fifteen minutes with a time scale, say:
axis.ticks(d3.timeMinute.every(15));这个方法是 axis.tickArguments 的一个便利函数。例如，这个：
🌐 This method is a convenience function for axis.tickArguments. For example, this:
axis.ticks(10);等同于：
🌐 Is equivalent to:
axis.tickArguments([10]);如果比例尺没有实现 scale.ticks，如 band 和 point 比例尺，则此方法无效。要明确设置刻度值，请使用 axis.tickValues。要明确设置刻度格式，请使用 axis.tickFormat。要直接生成刻度值，请使用 scale.ticks。
🌐 This method has no effect if the scale does not implement scale.ticks, as with band and point scales. To set the tick values explicitly, use axis.tickValues. To set the tick format explicitly, use axis.tickFormat. To generate tick values directly, use scale.ticks.
axis.tickArguments(arguments)
来源 · 如果指定了 arguments，则设置在轴被 渲染 时将传递给 scale.ticks 和 scale.tickFormat 的 arguments，并返回轴生成器。另请参阅 axis.ticks，它使用得更为普遍。
参数 的含义取决于 坐标轴刻度 的类型：最常见的是，参数表示刻度数量的建议 数量（或者对于时间刻度，是一个 时间 间隔），以及一个可选的 格式 说明符 来自定义刻度值的格式。例如，要在线性刻度上生成二十个带有 SI 前缀格式的刻度，可以这样说：
🌐 The meaning of the arguments depends on the axis’ scale type: most commonly, the arguments are a suggested count for the number of ticks (or a time interval for time scales), and an optional format specifier to customize how the tick values are formatted. For example, to generate twenty ticks with SI-prefix formatting on a linear scale, say:
axis.tickArguments([20, "s"]);要每十五分钟生成一次带有时间刻度的刻度，例如：
🌐 To generate ticks every fifteen minutes with a time scale, say:
axis.tickArguments([d3.timeMinute.every(15)]);如果未指定 arguments，则返回当前的刻度参数，默认值为空数组。如果指定了 arguments，当比例尺未实现 scale.ticks（如 band 和 point 比例尺）时，该方法无效。要显式设置刻度值，请使用 axis.tickValues。要显式设置刻度格式，请使用 axis.tickFormat。
🌐 If arguments is not specified, returns the current tick arguments, which defaults to the empty array. If arguments is specified, this method has no effect if the scale does not implement scale.ticks, as with band and point scales. To set the tick values explicitly, use axis.tickValues. To set the tick format explicitly, use axis.tickFormat.
axis.tickValues(values)
来源 · 如果指定了 values 可迭代对象，则使用指定的值作为刻度，而不是使用刻度的自动生成器。例如，要在特定值处生成刻度：
const axis = d3.axisBottom(x).tickValues([1, 2, 3, 5, 8, 13, 21]);显式的刻度值优先于通过 axis.tickArguments 设置的刻度参数。然而，如果没有设置刻度格式，任何刻度参数仍然会传递给比例的 tickFormat 函数。
🌐 The explicit tick values take precedence over the tick arguments set by axis.tickArguments. However, any tick arguments will still be passed to the scale’s tickFormat function if a tick format is not also set.
如果 values 为 null，会清除之前设置的所有显式刻度值，并恢复到刻度的刻度生成器。如果未指定 values，则返回当前的刻度值，默认值为 null。
🌐 If values is null, clears any previously-set explicit tick values and reverts back to the scale’s tick generator. If values is not specified, returns the current tick values, which defaults to null.
axis.tickFormat(format)
来源 · 如果指定了 format，则设置刻度格式函数并返回轴。例如，要显示以千位分隔符的整数：
axis.tickFormat(d3.format(",.0f"));更常见的是，将格式说明符传递给 axis.ticks，其优点是可以根据刻度间隔自动设置格式精度：
🌐 More commonly, a format specifier is passed to axis.ticks, which has the advantage of setting the format precision automatically based on the tick interval:
axis.ticks(10, ",f");请参见 d3-format 和 d3-time-format 以获取创建格式化器的帮助。
🌐 See d3-format and d3-time-format for help creating formatters.
如果未指定 format，则返回当前的格式函数，默认为 null。null 格式表示应使用刻度的默认格式化函数，该函数是通过调用 scale.tickFormat 生成的。在这种情况下，axis.tickArguments 指定的参数同样会传递给 scale.tickFormat。
🌐 If format is not specified, returns the current format function, which defaults to null. A null format indicates that the scale’s default formatter should be used, which is generated by calling scale.tickFormat. In this case, the arguments specified by axis.tickArguments are likewise passed to scale.tickFormat.
axis.tickSize(size)
来源 · 如果指定了 size，将 内部 和 外部 刻度大小设置为指定值，并返回坐标轴。
const axis = d3.axisBottom(x).tickSize(0);如果未指定 size，则返回当前的内部刻度大小，默认为 6。
🌐 If size is not specified, returns the current inner tick size, which defaults to 6.
axis.tickSize() // 0, as specified aboveaxis.tickSizeInner(size)
来源 · 如果指定了 size，则将内部刻度大小设置为指定值并返回轴。
const axis = d3.axisBottom(x).tickSizeInner(0);如果未指定 size，则返回当前的内部刻度大小，默认为 6。
🌐 If size is not specified, returns the current inner tick size, which defaults to 6.
axis.tickSizeInner() // 0, as specified above内刻度大小控制刻度线的长度，相对于轴的原始位置偏移。
🌐 The inner tick size controls the length of the tick lines, offset from the native position of the axis.
axis.tickSizeOuter(size)
来源 · 如果指定了 size，则将外刻度的大小设置为指定值并返回该轴。
const axis = d3.axisBottom(x).tickSizeOuter(0);如果未指定 size，则返回当前的外部刻度大小，默认值为 6。
🌐 If size is not specified, returns the current outer tick size, which defaults to 6.
axis.tickSizeOuter() // 0, as specified above外部刻度大小控制域路径方形端点的长度，这些端点从坐标轴的本地位置偏移。因此，“外部刻度”实际上并不是刻度，而是域路径的一部分，它们的位置由相关比例尺的域范围决定。因此，外部刻度可能会与第一个或最后一个内部刻度重叠。外部刻度大小为 0 会抑制域路径的方形端点，而产生一条直线。
🌐 The outer tick size controls the length of the square ends of the domain path, offset from the native position of the axis. Thus, the “outer ticks” are not actually ticks but part of the domain path, and their position is determined by the associated scale’s domain extent. Thus, outer ticks may overlap with the first or last inner tick. An outer tick size of 0 suppresses the square ends of the domain path, instead producing a straight line.
axis.tickPadding(padding)
来源 · 如果指定了paging，则将填充设置为指定的像素值并返回轴。
const axis = d3.axisBottom(x).tickPadding(0);如果未指定padding，则返回当前的填充，默认值为3像素。
🌐 If padding is not specified, returns the current padding which defaults to 3 pixels.
axis.tickPadding() // 0, as specified aboveaxis.offset(offset)
来源 · 如果指定了 offset，则将像素偏移量设置为指定的像素值并返回该轴。
const axis = d3.axisBottom(x).offset(0);如果未指定 offset，则返回当前像素偏移量。
🌐 If offset is not specified, returns the current pixel offset.
axis.offset() // 0在 devicePixelRatio 大于 1 的设备上，像素偏移默认为 0，否则为 0.5。这个默认的像素偏移可以确保低分辨率设备上的边缘清晰。
🌐 The pixel offset defaults to 0 on devices with a devicePixelRatio greater than 1, and 0.5 otherwise. This default pixel offset ensures crisp edges on low-resolution devices.