轴

优质

小牛编辑

128浏览

2023-12-01

D3 的轴组件(axis component)自动展示比例尺参照的线。这使得你可以专注于展示数据，而轴组件需要关心绘制坐标轴和刻度标记的繁琐任务。

Axis

轴组件设计来和D3的定量(quantitative)，时间(time)和序数比例尺(ordinal)一起使用。

d3.svg.axis()

创建一个默认的轴。

axis(selection)

将轴应用到选择器和过渡上。选择必须包含svg或者g元素。例如：

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

axis.scale([scale])

如果指定了 scale 参数则设置刻度尺，并返回轴。如果未指定 scale 参数，将返回当前的刻度尺，默认为线性刻度。

axis.orient([orientation])

如果指定了方向 orientation 参数则设置方向，并返回轴。如果未指定 orientation 参数，将返回当前的刻度尺，默认为"bottom"。支持下面几种方向：

"top" -刻度位于横轴域路径上面
"bottom" -刻度位于横轴域路径下面
"left" -刻度位于纵轴域路径左边
"right" -刻度位于纵轴域路径右边

如果指定的方向是不支持的值之一，该轴将恢复为默认的方向。改变方向将影响刻度和它们的标签相对于轴路径的的位置，但不改变该轴本身的位置; 为了改变轴相对于基址图的位置，可以指定g元素上的 transform 变换属性。

axis.ticks([arguments…])

如果指定了 arguments 参数，存储指定的参数为之后来用生成刻度并返回轴。参数之后会传递给scale.ticks生成刻度值(除非刻度值通过明确地指定axis.tickValues)。参数将传递给比例尺的tickFormat方法用来生成默认的刻度格式。如果没有指定参数，返回当前的刻度参数，默认是[10]。

合适的参数取决于关联的比例尺：对于线性比例尺，你可以指定刻度数为axis.ticks(20)；对于对数比例尺你可以指定数量和刻度格式；对于时间比例尺，时间间隔例如axis.ticks(d3.time.minutes, 15)可能更合适。

axis.tickValues([values])

如果指定了 values 数组，指定的数值将用于刻度，而不是使用使用比例尺的自动刻度生成器。如果 values 是null，清空任何预先设定的明确的刻度值，回到原来比例尺的生成器。如果没有指定 values ，返回当前设定的刻度值，默认是null。例如，为了生成刻度为指定的值：

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

明确地刻度值优先于通过使用 axis.ticks 设置刻度参数。但是，任何的参数都仍然传递给比例尺的 tickFormat 函数，如果一个刻度格式也没设置；这样，它可以有效的设置axis.ticks和axis.tickValues。

axis.tickSize([inner, outer])

如果指定了 inner 和 outer ，设置内部和外部刻度尺寸为指定的值并返回轴。如果 inner 和 outer 没有指定，返回当前的内部刻度尺寸，默认是6。

axis.innerTickSize([size])

如果指定了 size ，设置内部刻度尺寸为指定的值并返回轴。如果没有指定 size ，返回当前的内部刻度尺寸，默认是6。内部刻度尺寸控制刻度线的长度，从轴的原生位置偏移。

axis.outerTickSize([size])

如果指定了 size ，设置外部刻度尺寸为指定的值，并返回轴。如果没有指定 size ，返回当前的外部刻度尺寸，默认是6。外部刻度尺寸控制域路径末尾的平方长度，从轴的原生位置偏移。这样，因此，“外刻度”实际上不是刻度但是域路径的一部分，并且它们的位置由相关的比例尺的域范围来确定。这样，外刻度可能与第一个或最后内部刻度重叠。外刻度尺寸0的禁止域路径的平方端，而不是产生一条直线。

axis.tickPadding([padding])

如果指定填充边距 padding，设置填充边距的指定值并返回对应的轴。如果没有指定填充边距 padding，返回当前默认填充边距（默认为3像素）。

axis.tickFormat([format])

如果指定格式 format，格式设置为指定的函数并返回axis。如果没有指定格式 format，返回当前格式函数，默认为空。空格式表示应该使用比例尺的默认格式器，此格式通过调用scale.tickFormat产生。在这种情况下，ticks指定的参数同样传递给scale.tickFormat方法。

查看d3.format创建格式的帮助。例如,axis.tickFormat(d3.format(.0f“))将通过逗号分组千位显示一个整数。首先定义格式器：var commasFormatter = d3.format(”,.0f”) 可以让你把它作为你的数据的函数，例如,在comma-grouped整数前添加“$”符号：.tickFormat(function(d) { return "$" + commasFormatter(d); })。

注意:对于对数比例尺，刻度的数值不能自定义；然而，刻度的数值标签可以通过ticks自定义。同样，对数比例尺刻度的格式器通常是通过ticks而不是tickFormat指定，以保持默认标签隐藏(label-hiding)行为。