d3-axis

轴组件用于为scales（比例尺）渲染人类可读的参考标记。这减轻了数据可视化操作中繁琐的任务之一。

Installing

如果你使用npm，请键入npm install d3-axis。否则，请下载最新版本。你也可以直接从d3js.org加载，作为standalone library（独立库）或D3 4.0（为了更好的使用，你也会想使用d3-scale和d3-selection，但它们并不是完全依赖的）的一部分来使用。支持AMD，CommonJS和vanilla环境。在vanilla环境下，会输出一个全局的d3：

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

var axis = d3.axisLeft(scale);

</script>

API Reference

不管方向如何，轴始终在原点处渲染。想要更改轴相对于图表的位置，可以在容器元素上指定一个transform属性。例如：

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

由轴创建的元素会被认为是其公共API的一部分。你可以使用外部样式表或修改生成的轴元素来定制轴的外观。

一条轴由一个带有“domain”类的表示刻度范围的path element（路径元素）组成，跟随着转换后带有“tick”类的表示比例尺tick（刻度）的g elements。每个刻度中有一个用来绘制刻度线line element（直线元素）和表示刻度标签的text element（文本元素）。例如，下面是一条典型的位于底部的轴：

<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参数为空，tick大小为6，padding为3。在这个方向上，t刻度绘制在水平区域路径上方。

d3.axisRight(scale)

为给定scale构建一个位于右侧的轴生成器，tick参数为空，tick大小为6，padding为3。在这个方向上，t刻度绘制在水平区域路径右方。

d3.axisBottom(scale)

为给定scale构建一个位于底部的轴生成器，tick参数为空，tick大小为6，padding为3。在这个方向上，t刻度绘制在水平区域路径下方。

d3.axisLeft(scale)

为给定scale构建一个位于左侧的轴生成器，tick参数为空，tick大小为6，padding为3。在这个方向上，t刻度绘制在水平区域路径左侧。

axis(context)

将轴渲染到给定context，其有可能为SVG容器（SVG或G元素）的selection（选集）或相应的transition（过渡）。

axis.scale([scale])

如果指定了scale，则设置比例尺并返回此轴。如果不指定scale，则返回当前的比例尺。

axis.ticks(arguments…)

axis.ticks([count[, specifier]])

axis.ticks([interval[, specifier]])

设置在轴渲染后将被传入scale.ticks和scale.tickFormat的arguments，并返回此轴生成器。arguments的意义取决于轴的刻度类型：通常为一个表示刻度数量的建议count（或者表示时间比例尺的时间区间），可以指定一个格式化的specifier，用于自定义刻度值的格式。

如果刻度没有实现scale.ticks，此方法没有效果，与band和point比例尺一样。想要显式地设置刻度值，可以使用axis.tickValues。想要显式地设置刻度的格式，可以使用axis.tickFormat。

例如，在线性比例尺上生成20个带有SI前缀的刻度，可以这样写：

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，并返回此轴生成器。arguments的意义取决于轴的刻度类型：通常为一个表示刻度数量的建议count（或者表示时间刻度的时间区间），可以指定一个格式化的specifier，用于自定义刻度值的格式。

如果不指定arguments，而比例尺没有实现scale.ticks，此方法没有效果，与band和point比例尺一样。想要显式地设置刻度值，可以使用axis.tickValues。想要显式地设置记号的格式，可以使用axis.tickFormat。

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

例如，在线性比例尺上生成20个带有SI前缀的刻度，可以这样写：

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

在时间比例尺上每15分钟生成一个刻度，可以这样写：

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

另请参阅axis.ticks。

axis.tickValues([values])

如果指定了values，则给定的values将用于刻度而不是用于比例尺的刻度自动生成器。如果values为null，则清除先前显示设置的所有显示刻度值，然后使用比例尺的刻度生成器。如果不指定values，则返回当前的刻度值，默认为null。例如，为给定values生成刻度：

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

明确的刻度值优先于由axis.tickArguments设置的刻度参数。但是，如果没有设置刻度格式，则刻度参数依然会被传入比例尺的tickFormat函数中。

axis.tickFormat([format])

如果指定了format，则设置刻度的格式化函数并返回此轴。如果不指定format，则返回当前的格式化函数，默认为null。如果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。外部刻度大小控制着区域路径的方形末端的长度及相对于轴自身位置的偏移量。因此，“outer ticks”实际上不是刻度，而是部分区域路径，它们的位置是由关联比例尺的区域范围决定的。因此，外部刻度可能与第一个或最后一个内部刻度重叠。大小为0的外部刻度抑制着区域路径的方形末端，而不是生成一条直线。

axis.tickPadding([padding])

如果指定了padding，则设置间隔为以像素为单位的给定值并返回此轴。如果不指定padding，则返回当前的间隔，默认为3。

results matching ""

    No results matching ""