前言
@d3-axis 是整个 D3 库中的一个模块。它提供了多个很好用的 API 帮助我们创建 x-axis 和 y-axis 并且可以定制化。
安装之前需要了解一下 Node.js 和 NPM,如果你没有 Node.js 的话，可以通过 Node.js 官网 安装；如果你没有 NPM 的话，可以通过简单的命令行执行 npm install -g npm 来安装。 安装完成后你就可以通过命令行来安装本教程所用到的 npm 包了。
安装
使用以下命令安装 @types/d3-axis 包：
npm install --save @types/d3-axis
引用
在项目的 TypeScript 文件中引用 @types/d3-axis 包：
import * as d3 from "d3";
import { axisBottom, axisLeft } from "d3-axis";API
@d3-axis 模块提供了两种常用的坐标轴的类型：
- d3.axisBottom() ：为底部坐标轴创建一个 new axis generator。
- d3.axisLeft() ：为左侧坐标轴创建一个 new axis generator。
所有坐标轴的配置选项都是在数据的基础上构建的，因此在建立坐标轴之前需要先知道数据的类型和范围。d3 库中提供了许多有用的位置操作和比例尺函数。因此，在使用坐标轴之前需要了解这些操作和函数的使用方式。
示例
以下代码演示如何使用 @types/d3-axis 包。
HTML
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- ---- ---------------
------- ---------------------------------------------
-------
------
---- ----------- -------------------
------- --------------------------
-------
-------TypeScript
-- -------------------- ---- -------
------ - -- -- ---- -----
------ - ----------- -------- - ---- ----------
----- ---- - -
--- ---
--- ---
--- ---
--- --
--
----- ----- - ----
----- ------ - ----
----- --- - ----------------
-------------- ------
--------------- --------
----- - - ----------------
----- - - ----------------
----------- ------------ - -- -------
---------- ----- - -----
----- - - ----------------
----------- ------------ - -- -------
-------------- - --- ----
----- ----- - ------------
----- ----- - --------------
-------------
------------------ ------------------
-------------
-------------
------------------ -------------- - ------- - --- - ----
-------------代码解释：
首先，在准备好要绘制的数据后，我们定义了一个 svg 元素，然后在 svg 中添加了一个 g 元素。
然后使用 d3.scaleLinear() 函数创建了 x 和 y 的比例尺，关于比例尺的更多信息可以参考官方文档。
接着，通过 axisBottom() 和 axisLeft() 创建了两个 axis generator 分别对应底部和左侧坐标轴。
最后，在 g 元素下面添加了两个 g 元素，分别输出底部和左侧坐标轴。
结论
@d3-axis 是 D3 库中极为实用的一个模块，它可以帮助我们轻松的创建出坐标轴，让数据更加容易的被观察和理解。希望这篇文章对你的学习有所帮助。如果你想了解更多关于 D3.js 的内容，可以参考官方文档。
参考
- D3.js
- @types/d3-axis
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad3bb5cbfe1ea0610c0d