d3-axis

优质

小牛编辑

126浏览

2023-12-01

坐标轴组件可以将 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 像素。