前言
在前端开发中,使用图表来展现数据是一种常见的方式。而使用 d3.js 可以轻松地实现各种各样的图表。但是在实际应用中,我们不可能每次都从头开始写代码来实现各种图表。这时就需要借助一些现成的库来加快开发速度。
其中一个比较优秀的图表库就是 d3plus。它是基于 d3.js 的一个可视化库,提供了大量的常用图表类型,包括柱状图、折线图、饼图、地图等。而 d3plus-common 就是 d3plus 的一个常用组件,它包含了一些常用的功能,例如颜色、大小、时间等的计算和转换。
本文将介绍 d3plus-common 的使用教程,包括安装、配置以及示例代码。
安装
要使用 d3plus-common,首先需要在项目中安装它。可以通过 npm 进行安装:
--- ------- -------------
配置
在安装完成后,需要在代码中引入它:
------ - -- ------------ ---- ----------------
这样就可以使用 d3plus-common 中的各种方法了。
使用方法
色彩
d3plus-common 中提供了两种获取颜色的方法:d3plusCommon.color.assign
和 d3plusCommon.color.categ
. 分别用于生成连续色和离散色。
assign
----- ------ - ----------------------------- ----- --------
其中 [0, 100]
是数据范围,'BuGn'
是颜色类型。color.assign
方法会返回一个函数,该函数可以将数据映射到颜色中:
----- ---------- - ------------------------------------------------ ----- -------- ----------- ------ ----- ----- - --------------- -- ---------
categ
----- ------ - ---------------------------------- --------- ---------- --------------
其中 ['apple', 'banana', 'cherry']
是数据,'category10'
是颜色类型。color.categ
方法也会返回一个函数,该函数可以将数据映射到颜色中:
----- ---------- - ----------------- ----------------------------------------- --------- ---------- --------------- ----- ------ - -------------------- -- --------- ----- ------ - --------------------- -- --------- ----- ------ - --------------------- -- ---------
大小
d3plus-common 中提供了 d3plusCommon.size.value
方法用于计算大小,同时也提供了 d3plusCommon.size.legend
方法用于生成大小图例。
value
----- --------- - --------------------------- ----- --- ----- ---- - --------------- -- -
其中 [0, 200]
是数据范围,5
是最小值。size.value
方法会返回一个函数,将数据映射到大小中。
legend
----- ----------- - --------------------------- ----- --- ----- --------- - ---------------- ----------------- ------------------ ----- ---------- - ----------------------------------- --------- --------- ---------- ------------------------
运行上面的代码会输出下面的结果:
- - -------- ---------- ----- ---------------------------- ------- -- -- - -------- ---------- ----- ---------------------------- -------- -------- ------- -- -- - -------- ---------- ----- ---------------------------- -------- --------- ------- --- -- - -------- ---------- ----- ---------------------------- -------- -------- ------- --- - -
时间
d3plus-common 中提供了 d3plusCommon.time.parse
方法用于解析时间字符串,也提供了 d3plusCommon.time.format
方法用于格式化时间。
parse
----- ---- - ----------------------------------------------- ------------------ -- --- --- -- ---- -------- -------- --------
format
----- ---------- - ------------------------------ --------- ----------- ------------------------ -- ----------- ---------
其中 %Y-%m-%d %H:%M:%S
是时间格式字符串。
结语
d3plus-common 是一个非常方便的工具库,可以加速我们在前端开发中实现图表的速度。如果更深入地了解 d3plus 就可以更好地使用 d3plus-common 了。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/69253