简介
d3-helpers 是一个方便前端开发使用的 D3.js 辅助库，它为 D3.js 提供了更高层次、更易用的 API。使用 d3-helpers 可以简化 D3.js 的代码编写，提高开发效率。
安装
d3-helpers 可以通过 npm 安装：
npm install d3-helpers
也可以通过 CDN 直接引入：
<script src="https://cdn.jsdelivr.net/npm/d3-helpers"></script>
使用方法
d3-helpers 中包含了很多常用的函数和方法，大大减少了使用 D3.js 时的代码量。下面介绍一些常用的 API。
selectAllData
selectAllData 方法可以将一个选择集和数据项连接起来，返回一个带有数据属性的选择集，从而简化数据绑定的过程。例如：
d3.selectAll("p").selectAllData(["Hello", "World"]).text(d => d);上面的代码将两个 p 元素与字符串数组 ["Hello", "World"] 绑定，然后将每个 p 元素的文本内容分别设置为对应的字符串。
axisHelper
axisHelper 方法可以创建刻度尺，并且自动计算最优的刻度值和格式。例如：
const xScale = d3.scaleLinear().domain([0, 10]).range([0, 100]);
const xAxis = d3.axisBottom(xScale);
d3.select("svg").call(d3.axisHelper(xAxis));上面的代码创建了一个线性比例尺，用于将区间 [0, 10] 映射到 [0, 100]。然后通过 axisBottom 方法创建了一个底部刻度尺，并将其与 SVG 元素绑定。最后调用 axisHelper 方法将刻度尺应用到 SVG 元素中。
示例代码
下面是一个简单的示例代码，使用了 d3-helpers 来绘制一个简单的柱状图：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ----- ---------------
------- -----------------------------------------------------
------- -------------------------------------------------------------
-------
------
---- ----------- -------------------
--------
----- ---- - --- --- --- --- ----
----- ------ - ---------------------------------- -- -- ------------- -------------------
----- ------ - --------------------------- -------------------------- ----
----- ----- - ----------------------
----- ----- - --------------------
----- --- - -----------------
---------------------
-----------
-------------
---------- --- -- -- ----------
---------- - -- ----------
-------------- -------------------
--------------- - -- --- - ----------
------------- -------------
------------------------------------------------------------ ------------- -------
-------------------------------------------
---------
-------
-------运行上面的代码，可以看到一个简单的柱状图。这个代码演示了如何使用 d3-helpers 中的 axisHelper 方法来创建刻度尺，以及如何使用 selectAllData 方法将数据绑定到选择集上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/46031