在 Web 开发领域中，D3（Data-Driven Documents）是一个著名的可视化 JavaScript 库。它可以帮助开发者使用 HTML、SVG 及 CSS 来更优雅地呈现数据的可视化结果。而 d3-bundle-element 封装了 D3 中比较常用的类，方便使用者快速搭建 D3 相关的 Web 应用，接下来就是教程详解。
安装 d3-bundle-element
通过 npm 安装 d3-bundle-element：
npm install d3-bundle-element
引入 d3-bundle-element
在 HTML 中引入 d3-bundle-element：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ------ ---------------
------- --------------------------------------------- -- --------
------- ---------------------------------------- -- -----------------------
-------
------
---- ------------------------- --- -- -------- ---
-------
-------d3-bundle-element 常用类的介绍
d3-bundle-element 中封装了 D3 中的常用类，比如：scale（比例尺）、axis（轴）、line（线条）、area（区域）等等。这些类可以帮助开发者构建更加复杂的 D3 可视化图形。
Scale 类
在 D3 库中，scale 类可以将具体的数据值映射到图形的位置（比如折线图中的 y 轴数值）。在 d3-bundle-element 中，scale 类以及其对应的构造函数如下所示：
d3.scale.scaleLinear() d3.scale.scaleLog() d3.scale.scalePow() d3.scale.scaleSqrt() d3.scale.scaleOrdinal() d3.scale.scaleBand()
这些构造函数可以根据开发者的需求，构建出不同类型的比例尺，从而更好地实现具体图形的可视化。
Axis 类
D3 库中，axis 就是坐标轴。与 scale 类一样，axis 类也支持不同的构造函数，以便开发者进行针对性的配置。
d3.axis.axisBottom() d3.axis.axisLeft() d3.axis.axisRight() d3.axis.axisTop()
其中，axisBottom() 和 axisLeft() 分别用于实现底部和左侧的坐标轴，同理可以通过 axisRight() 和 axisTop() 构建右侧和顶部坐标轴。
Line 类
D3 库中，line 类能够将一系列的坐标点连接起来，形成一个连续的线条，从而实现折线图的绘制。d3-bundle-element 中，line 类构造函数如下：
d3.line()
Area 类
D3 库中，area 类用于绘制区域图，这类图表由线条与 X 轴之间填充起来的颜色块构成。d3-bundle-element 中，area 类构造函数如下：
d3.area()
示例代码
现在，我们就可以使用 d3-bundle-element 封装的上述类库来实现具体可视化的代码展示。
HTML 代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ------ ---------------
------- --------------------------------------------- -- --------
------- ---------------------------------------- -- -----------------------
-------
------
---- ------------------------- --- -- -------- ---
------- ---------------------------- ------- -- -- ---
-------
-------JavaScript 代码（index.js）：
-- -------------------- ---- -------
----- ---- - ---- --- --- --- ----
----- - - ---- - - ----
----- --- - ------------------------- ------- --- --
--------------
-------------- --
--------------- ---
----- ------ - ------------------ ---------
----------- ---------------- -- - -----
---------- ------ -- - ------
----- ------ - ------------------ ---------
----------- ---------------- -- - -----
---------- ------ -- - ------
----- ---- - ----------- ---------
------ -- -- ----------
------ -- -----------
------------------
-------------
---------- -----
--------------- ------------
--------------------- --
------------- --------
----- ----- - ----------------- -- - -
----------
----- ----- - --------------- -- - -
----------
---------------
------------------ -------------- - -- - --- - ------ - - -------
-------------
---------------
------------------ -------------- ------ - - -------
-------------以上代码通过创建一个 SVG 容器，并使用常用类绘制了一条折线图，其效果如下图所示：
总结
通过本文的介绍，我们了解了 d3-bundle-element 这个实用的 npm 包。该包内部封装了 D3 库中的常用类，使用方便、简洁；并以具体的折线图为例，让开发者们快速上手使用 D3 库进行可视化的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e4d9381d61a3540acc