D3 坐标轴模块

坐标轴组件 Axis 可以基于比例尺 scales 生成人类友好型的刻度标尺。

提示

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

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

坐标轴组件由几个 SVG 元素组成，其中包括：

类名为 domain 的 <path> 元素，表示比例尺的输入范围（轴长）
一组类名为 tick 的 <g> 元素，而且通过变换来设置其坐标轴。每个刻度组元素内包含一个 <line> 元素表示刻度线，以及一个 <text> 元素表示刻度标签

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>

提示

坐标轴组件是使用标准的 svg 元素创建的，所以可以通过样式表或者修改元素的相关属性来自由地设置坐标轴的外观

创建坐标轴

使用不同的方法创建刻度在不同方向的坐标轴，默认 tick arguments 为空，tick size 为 6，padding 为 3。

d3.axisTop(scale) 使用给定的 scale 构建一个刻度在上的坐标轴生成器，坐标轴为水平方向。
d3.axisRight(scale) 使用给定的 scale 构建一个刻度在右的坐标轴生成器，坐标轴为垂直方向。
d3.axisBottom(scale) 使用给定的 scale 构建一个刻度在下的坐标轴生成器，坐标轴为水平方向。
d3.axisLeft(scale) 使用给定的 scale 构建一个刻度在左的坐标轴生成器，坐标轴为垂直方向。

提示

也可以使用方法 axis.scale([scale]) 在创建空的坐标轴后，再指定比例尺 scale 来设置坐标轴的范围、刻度、标签等。

渲染坐标轴

axis(context) 将坐标轴渲染到指定的 context context 可能是一个包含 SVG 元素的 selection（<svg> 元素或 <g> 元素）也可能是一个过渡 transition

提示

也可以使用方法 .call(axis) 将创建的坐标轴添加到指定的 SVG 组中。

// create axes group, use transform property and transition to set the axis position
const xAxisGroup = svg.append('g')
  .attr('transform', `translate(0, ${graphHeight})`);
const yAxisGroup = svg.append('g');

// set axis
const xAxis = d3.axisBottom(x-scale);
const yAxis = d3.axisLeft(y-scale);
xAxisGroup.call(xAxis);
yAxisGroup.call(yAxis);

坐标刻度

axis.tickValues([values]) 如果指定了 values 数组，则使用指定的数组作为刻度而不是基于比例尺 scale 自动计算刻度。如果 values 为 null 则清除之前设置的显示刻度参数

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

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

// 使用逗号分组来表示千分位数
axis.tickFormat(d3.format(",.0f"));

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