d3-axis

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

Installing

使用 NPM 安装: npm install d3-axis, 还可以下载 latest release(最新版)。此外还可以直接从 d3js.orgstandalone library(标准库) 或者作为 D3 4.0 的一部分直接载入(实际使用时可能还需要 d3-scaled3-selection 但是并没有依赖关系)。支持 AMDCommonJS 以及标签引入形式,如果使用标签引入则会暴露全局 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,因此可以自由的设置外部样式或者修改元素来 (自定义表现形式)

Custom Axis

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

<g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
  <path class="domain" stroke="#000" d="M0.5,6V0.5H880.5V6"></path>
  <g class="tick" opacity="1" transform="translate(0.5,0)">
    <line stroke="#000" y2="6"></line>
    <text fill="#000" y="9" dy="0.71em">0.0</text>
  </g>
  <g class="tick" opacity="1" transform="translate(176.5,0)">
    <line stroke="#000" y2="6"></line>
    <text fill="#000" y="9" dy="0.71em">0.2</text>
  </g>
  <g class="tick" opacity="1" transform="translate(352.5,0)">
    <line stroke="#000" y2="6"></line>
    <text fill="#000" y="9" dy="0.71em">0.4</text>
  </g>
  <g class="tick" opacity="1" transform="translate(528.5,0)">
    <line stroke="#000" y2="6"></line>
    <text fill="#000" y="9" dy="0.71em">0.6</text>
  </g>
  <g class="tick" opacity="1" transform="translate(704.5,0)">
    <line stroke="#000" y2="6"></line>
    <text fill="#000" y="9" dy="0.71em">0.8</text>
  </g>
  <g class="tick" opacity="1" transform="translate(880.5,0)">
    <line stroke="#000" y2="6"></line>
    <text fill="#000" y="9" dy="0.71em">1.0</text>
  </g>
</g>

坐标轴的方向是固定的,如果要改变方向,则要移除旧的并重新创建一个新的坐标轴。

# d3.axisTop(scale) <源码>

使用给定的 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…) <源码>
# axis.ticks([count[, specifier]])
# axis.ticks([interval[, specifier]])

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

这个方法有局限,当使用 bandpoint 比例尺时没有作用,但是 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.ticksscale.tickFormat 并且返回当前坐标轴生成器。也就是 arguments 依赖 axis’ scale: 大多数情况下建议传入一个期望的 ticks个数: count (或者当使用时间比例尺时传入 time interval), 或者是 format specifier 定义刻度的展示格式。

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

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

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

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

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

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

参考 axis.ticks.

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

如果指定了 values 数组,则使用指定的数组作为刻度而不是自动计算刻度。如果 valuesnull 则清除之前设置的显示刻度参数,也就是如果之前设置过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 像素。

最后更新: 2019-5-18 18:11:02
本站功能逐步完善中,如果您对本站有好的建议或者意见,欢迎留言。 取 消 确 定