作者Observable

外观

d3-axis ​

轴组件呈现人类可读的参考标记，用于定位 刻度。它适用于大多数刻度类型，包括线性、对数、带状和时间刻度，如上所示。

在 SVG 容器（通常是单个 G 元素）的 选择 上调用轴组件将填充轴。轴在原点渲染。要更改轴相对于图表的位置，请在包含元素上指定 变换属性。

js
const gx = svg.append("g")
    .attr("transform", `translate(0,${height - marginBottom})`)
    .call(d3.axisBottom(x));

如果刻度已更改，请再次调用轴组件以更新。对于平滑动画，您可以在 过渡 上调用它。

js
gx.transition()
    .duration(750)
    .call(d3.axisBottom(x));

轴创建的元素被认为是其公共 API 的一部分。您可以应用外部样式表或修改生成的轴元素以 自定义轴外观。轴由一个类为“domain”的 路径元素 组成，表示刻度域的范围，后面是经过转换的类为“tick”的 g 元素，表示刻度的每个刻度。每个刻度都有一个 线元素 用于绘制刻度线，以及一个 文本元素 用于刻度标签。例如，这是一个典型的底部方向轴

html
<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>

轴的方向是固定的；要更改方向，请删除旧轴并创建一个新轴。

axisTop(scale) ​

源代码 · 为给定的 刻度 创建一个新的顶部方向轴生成器，具有空的 刻度参数，一个 刻度大小 为 6，填充 为 3。在此方向上，刻度绘制在水平域路径上方。

axisRight(scale) ​

源代码 · 为给定的 刻度 创建一个新的右侧方向轴生成器，具有空的 刻度参数，一个 刻度大小 为 6，填充 为 3。在此方向上，刻度绘制在垂直域路径右侧。

axisBottom(scale) ​

源代码 · 为给定的 刻度 创建一个新的底部方向轴生成器，具有空的 刻度参数，一个 刻度大小 为 6，填充 为 3。在此方向上，刻度绘制在水平域路径下方。

axisLeft(scale) ​

源代码 · 为给定的 刻度 创建一个新的左侧方向轴生成器，具有空的 刻度参数，一个 刻度大小 为 6，填充 为 3。在此方向上，刻度绘制在垂直域路径左侧。

axis(context) ​

源代码 · 将轴渲染到给定的 context，它可以是 SVG 容器（SVG 或 G 元素）的 选择 或相应的 过渡。

js
svg.append("g")
    .attr("transform", `translate(0,${height - marginBottom})`)
    .call(d3.axisBottom(x));

axis.scale(scale) ​

源代码 · 如果指定了 scale，则设置 刻度 并返回轴。如果未指定 scale，则返回当前刻度。

js
const xAxis = d3.axisBottom().scale(x);

axis.ticks(...arguments) ​

设置将在渲染轴时传递给 scale.ticks 和 scale.tickFormat 的 arguments，并返回轴生成器。

arguments 的含义取决于 轴的刻度 类型：最常见的是，参数是刻度数量的建议 count（或时间刻度的 时间 interval），以及可选的 格式 specifier 用于自定义刻度值的格式。例如，要在线性刻度上生成 20 个带 SI 前缀格式的刻度，请说

js
axis.ticks(20, "s");

要在时间刻度上生成每 15 分钟的刻度，请说

js
axis.ticks(d3.timeMinute.every(15));

此方法是 axis.tickArguments 的便利函数。例如，这

js
axis.ticks(10);

等效于

js
axis.tickArguments([10]);

如果刻度未实现 scale.ticks，则此方法无效，例如 带状 和 点 刻度。要显式设置刻度值，请使用 axis.tickValues。要显式设置刻度格式，请使用 axis.tickFormat。要直接生成刻度值，请使用 scale.ticks。

axis.tickArguments(arguments) ​

源代码 · 如果指定了 arguments，则设置将在渲染轴时传递给 scale.ticks 和 scale.tickFormat 的 arguments，并返回轴生成器。另请参见 axis.ticks，它更常用。

arguments 的含义取决于 轴的刻度 类型：最常见的是，参数是刻度数量的建议 count（或时间刻度的 时间 interval），以及可选的 格式 specifier 用于自定义刻度值的格式。例如，要在线性刻度上生成 20 个带 SI 前缀格式的刻度，请说

js
axis.tickArguments([20, "s"]);

要在时间刻度上生成每 15 分钟的刻度，请说

js
axis.tickArguments([d3.timeMinute.every(15)]);

如果未指定 arguments，则返回当前刻度参数，默认为空数组。如果指定了 arguments，则此方法在刻度未实现 scale.ticks 时无效，例如 带状 和 点 刻度。要显式设置刻度值，请使用 axis.tickValues。要显式设置刻度格式，请使用 axis.tickFormat。

axis.tickValues(values) ​

源代码 · 如果指定了 values 可迭代对象，则指定的值将用于刻度，而不是刻度自动刻度生成器。例如，要生成特定值的刻度

js
const axis = d3.axisBottom(x).tickValues([1, 2, 3, 5, 8, 13, 21]);

显式刻度值优先于 axis.tickArguments 设置的刻度参数。但是，如果未设置刻度格式，则任何刻度参数仍将传递给刻度的 tickFormat 函数。

如果 values 为 null，则清除任何先前设置的显式刻度值，并恢复到刻度的刻度生成器。如果未指定 values，则返回当前刻度值，默认为 null。

axis.tickFormat(format) ​

源代码 · 如果指定了 format，则设置刻度格式函数并返回轴。例如，要显示带逗号分隔的千位数的整数

js
axis.tickFormat(d3.format(",.0f"));

更常见的是，格式说明符传递给 axis.ticks，它具有基于刻度间隔自动设置格式精度的优势

js
axis.ticks(10, ",f");

有关创建格式器的帮助，请参见 d3-format 和 d3-time-format。

如果未指定 format，则返回当前格式函数，默认为 null。null 格式表示应使用刻度的默认格式器，它通过调用 scale.tickFormat 生成。在这种情况下，axis.tickArguments 指定的参数也会传递给 scale.tickFormat。

axis.tickSize(size) ​

源代码 · 如果指定了 size，则将 内部 和 外部 刻度大小设置为指定的值，并返回轴。

js
const axis = d3.axisBottom(x).tickSize(0);

如果未指定 size，则返回当前内部刻度大小，默认为 6。

js
axis.tickSize() // 0

axis.tickSizeInner(size) ​

源代码 · 如果指定了size，则将内部刻度大小设置为指定值并返回轴。

js
const axis = d3.axisBottom(x).tickSizeInner(0);

如果未指定 size，则返回当前内部刻度大小，默认为 6。

js
axis.tickSizeInner() // 0

内部刻度大小控制刻度线的长度，从轴的原生位置偏移。

axis.tickSizeOuter(size) ​

源代码 · 如果指定了size，则将外部刻度大小设置为指定值并返回轴。

js
const axis = d3.axisBottom(x).tickSizeOuter(0);

如果未指定size，则返回当前的外部刻度大小，默认为 6。

js
axis.tickSizeOuter() // 0

外部刻度大小控制域路径方端长度，从轴的原生位置偏移。因此，“外部刻度”实际上不是刻度，而是域路径的一部分，其位置由关联的比例域范围确定。因此，外部刻度可能会与第一个或最后一个内部刻度重叠。外部刻度大小为 0 会抑制域路径的方端，而是生成一条直线。

axis.tickPadding(padding) ​

源代码 · 如果指定了padding，则将填充设置为指定值（以像素为单位）并返回轴。

js
const axis = d3.axisBottom(x).tickPadding(0);

如果未指定padding，则返回当前填充，默认为 3 像素。

js
axis.tickPadding() // 0

axis.offset(offset) ​

源代码 · 如果指定了offset，则将像素偏移设置为指定值（以像素为单位）并返回轴。

js
const axis = d3.axisBottom(x).offset(0);

如果未指定offset，则返回当前像素偏移。

js
axis.offset() // 0

像素偏移在 devicePixelRatio 大于 1 的设备上默认为 0，否则为 0.5。此默认像素偏移可确保在低分辨率设备上获得清晰的边缘。