Question

坐标轴组件可以将 scales 显示为人类友好的刻度标尺参考，减轻了在可视化中的视觉任务。

Installing

使用 NPM 安装: npm install d3-axis , 还可以下载 latest release (最新版) 。此外还可以直接从 d3js.org 以 standalone library(标准库) 或者作为 D3 4.0 的一部分直接载入（实际使用时可能还需要 d3-scale 和 d3-selection 但是并没有依赖关系)。支持 AMD ， CommonJS 以及标签引入形式，如果使用标签引入则会暴露全局 d3 变量:

<script src="https://d3js.org/d3-axis.v1.min.js"></script>
<script>

var axis = d3.axisLeft(scale);

</script>

在浏览器中测试 d3-axis

API Reference

无论坐标轴的方向如何，都以原点为起点开始渲染。如果要改变坐标轴的位置，则需要通过 变换属性 来实现，例如：

d3.select("body").append("svg")
    .attr("width", 1440)
    .attr("height", 30)
  .append("g")
    .attr("transform", "translate(0,30)")
    .call(axis);

坐标轴组件创建的元素遵循元素公共 API，因此可以自由的设置外部样式或者修改元素来 (自定义表现形式)

坐标轴组件包含类名为 “domain” 的 path 元素 表示比例尺的输入范围，一组类名为 “tick” 的并且被坐标变换的 g 元素 表示比例尺的刻度。每个刻度包含一个 line 元素 表示刻度线以及一个 text 元素 表示刻度标签。例如，刻度朝下的坐标轴组件结构如下：

<g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
  <path class="domain" stroke=""https://github.com/d3/d3-axis/blob/master/src/axis.js" title="Source" target="_blank" rel="noopener noreferrer"><源码>

使用给定的 scale 构建一个刻度在上的坐标轴生成器，默认 tick arguments 为空, tick size 为 6， padding 为 3. 坐标轴为水平方向

d3. axisRight ( scale ) <源码>

使用给定的 scale 构建一个刻度在右的坐标轴生成器，默认 tick arguments 为空, tick size 为 6， padding 为 3. 坐标轴为垂直方向

d3. axisBottom ( scale ) <源码>

使用给定的 scale 构建一个刻度在下的坐标轴生成器，默认 tick arguments 为空, tick size 为 6， padding 为 3. 坐标轴为水平方向

d3. axisLeft ( scale ) <源码>

使用给定的 scale 构建一个刻度在左的坐标轴生成器，默认 tick arguments 为空, tick size 为 6， padding 为 3. 坐标轴为垂直方向

axis ( context ) <源码>

将坐标轴渲染到指定的 context , context 可能是一个包含 SVG 元素的 selection (SVG 或者 G 元素) 也可能是一个 transition .

axis.scale ([ scale ]) <源码>

如果指定了 scale 则设置坐标轴的 scale ，如果没有指定 scale 则返回当前坐标轴所使用的比例尺。

axis.ticks ( arguments… ) <源码>
"https://github.com/d3/d3-scale/blob/master/README.md" target="_blank" rel="noopener noreferrer"> scale .ticks 和 scale .tickFormat 并且返回当前坐标轴生成器. 也就是 arguments 依赖 axis’ scale: 大多数情况下建议传入一个期望的 ticks 个数: count (或者当使用时间比例尺时传入 time interval ), 或者是 format specifier 定义刻度的展示格式。

这个方法有局限，当使用 band 和 point 比例尺时没有作用，但是 axis .tickValues. 和 axis .tickFormat 不受比例尺类型限制。

比如当使用国际单位格式并且刻度参考个数为 20 的线性比例尺:

axis.ticks(20, "s");

每隔 15 分钟生成一个刻度的时间比例尺：

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

这个方法也可以看做是 axis .tickArguments 的简写，例如：

axis.ticks(10);

等价于:

axis.tickArguments([10]);

axis.tickArguments ([ arguments ]) <源码>

如果设置了 arguments 则将其传递给 scale .ticks 和 scale .tickFormat 并且返回当前坐标轴生成器。也就是 arguments 依赖 axis’ scale: 大多数情况下建议传入一个期望的 ticks 个数: count (或者当使用时间比例尺时传入 time interval ), 或者是 format specifier 定义刻度的展示格式。

这个方法有局限，当使用 band 和 point 比例尺时没有作用，但是 axis .tickValues. 和 axis .tickFormat 不受比例尺类型限制。

如果没有指定 arguments 则返回当前的 tick 参数，默认是一个空数组。

比如当使用国际单位格式并且刻度参考个数为 20 的线性比例尺:

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

每隔 15 分钟生成一个刻度的时间比例尺：

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

参考 axis .ticks.

axis.tickValues ([ values ]) <源码>

如果指定了 values 数组，则使用指定的数组作为刻度而不是自动计算刻度。如果 values 为 null 则清除之前设置的显示刻度参数，也就是如果之前设置过 values 则可以使用 null 将其取消。如果没有指定 values 则返回当前的刻度值参数，默认为 null。例如使用指定的数组作为刻度：

var xAxis = d3.axisBottom(x)
    .tickValues([1, 2, 3, 5, 8, 13, 21]);

通过 axis.tickValues 设置刻度的优先级大于通过 axis .tickArguments 设置的优先级。但是如果没有设置格式化仍然会参考 tickFormat 去对文本标签进行格式化。

axis.tickFormat ([ format ]) <源码>

如果指定了 format 则设置刻度文字标签格式化方法。如果没有指定 format 则返回当前的刻度文本格式化方法，默认为 null。在没有设置格式化方法的情况下，会使用默认的 scale .tickFormat 去生成刻度文本. 在这种情况下通过 axis .tickArguments 设置的格式化方法会直接被 scale .tickFormat 使用

参考 d3-format 和 d3-time-format 获取关于格式化的更多信息。例如，要使用逗号分组来表示千分位数：

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

为方便，可以直接将格式化字符串通过以下形式直接传递给 axis .ticks:

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

使用这种方法可以基于刻度间隔自动设置精度。

axis.tickSize ([ size ]) <源码>

如果指定了 size 则设置 内侧 和 外侧 刻度的大小，并返回坐标轴生成器。如果没有指定 size 则返回当前的刻度大小，默认为 6。

axis.tickSizeInner ([ size ]) <源码>

如果指定了 size 则设置内侧刻度大小，如果没有指定 size 则返回当前的刻度大小，默认为 6。内侧刻度大小控制着刻度线的长度。

axis.tickSizeOuter ([ size ]) <源码>

如果指定了 size 则设置外侧刻度大小，如果没有指定 size 则返回当前的刻度大小，默认为 6。外侧刻度大小控制着刻度线的长度。外侧刻度表示的是坐标轴最外侧两端的刻度线。内侧刻度和外侧刻度不同，内侧刻度是一个个单独的 line 元素，而外侧刻度则实际上是坐标轴线 path 的一部分。此外外侧刻度可能和第一个或最后一个内侧刻度重合。

axis.tickPadding ([ padding ]) <源码>

如果设置了 padding 则设置刻度和刻度文本之间的间距，如果没有指定 padding 则返回当前的间距，默认为 3 像素。