在前端开发中，D3 是一个广泛被使用的数据可视化库。@d3fc/d3fc-discontinuous-scale 是一个 D3 插件库，提供了在 D3 中使用不连续数据的尺度标度。它可以让你轻松地创建基于时间或者数量离散数据的尺度标度。
安装
首先，你需要保证本地已经安装了 D3。然后，我们可以通过 npm 来安装 @d3fc/d3fc-discontinuous-scale 这个库。
--- ------- ------------------------------
使用
要使用 @d3fc/d3fc-discontinuous-scale，你需要在你的代码中引入这个库。
------ ------------------ ---- ---------------------------------
然后，你就可以通过传入一个配置对象来创建一个离散尺度标度。
----- ----- - --------------------
------- ------- ------ ------ ------ ------ ------ -------
------ --- -----
----------- ---
--------- --
---这里，values 表示不连续数据的取值范围，range 表示标度的输出范围。pointWidth 表示单个点的宽度，gapWidth 表示间隙的宽度。
接下来，我们可以使用尺度标度来解析我们的数据。
-------------------------- -- - -------------------------- -- -- -------------------------- -- ---
这里，我们输入不连续数据的值，然后得到尺度标度的输出值。
示例代码
下面是一个完整的代码示例，展示如何使用 @d3fc/d3fc-discontinuous-scale 这个库。
------ - -- -- ---- -----
------ ------------------ ---- ---------------------------------
-- --------
----- ----- - --------------------
------- ------- ------ ------ ------ ------ ------ -------
------ --- -----
----------- ---
--------- --
---
-- -- ---
----- --- - -------------------------------
-------------- ----
--------------- -----
-- ----
---------------------
------------- ------ ------ -------
-----------------------
---------- --- -- ---------
---------- ---
-------------- --- -- ------------------
--------------- ---
------------- -----------这里我们创建了一个离散尺度标度，然后通过 D3 来创建一个 SVG，最后使用离散尺度标度来计算我们的矩形的 x 坐标。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedcb46b5cbfe1ea0612596