前言
在前端开发中，我们经常需要处理数据并以可视化图表的方式呈现出来，而树状图是其中一个很常见的方式。 tree-map 是一个能够将数据显示为矩形树状图的 npm 包，具有简单易用、可定制性高等优点。本文将介绍该包的使用方法。
安装
在命令行中使用 npm install tree-map 进行安装即可。
基本使用
数据格式
tree-map 包要求的数据格式为对象的数组，每个对象对应矩形树状图中一个节点，对象中需包含以下属性：
name：节点名称，字符串类型。value：节点值，数字类型。children（可选）：子节点数据，也是对象的数组类型。
例如：
----- ---- - -
- ----- ---- ------ -- --
- ----- ---- ------ -- --
- ----- ---- ------ --- --------- -
- ----- ------ ------ -- --
- ----- ------ ------ -- -
---
- ----- ---- ------ -- -
--使用方法
------ ------- ---- ----------- -- -- ------- -- ----- ------- - --- --------- -- --- --- ------------ ---------- ----------- -- ------ ----- -- --- -- --- --- -- -- -----------------
上面代码中 container 选项传入的是一个 DOM 元素选择器，指定了渲染容器的位置。
属性与方法
容器大小
可以通过 width 和 height 属性设置容器大小。
----- ------- - --- --------- -- --- ------ ---- -- -- ------- ---- -- -- -- --- ---
点击事件
可以通过 onClick 方法设置节点点击事件回调。
----- ------- - --- ---------
-- ---
-------- ------ -- -
------------------ -- --------
-
---颜色映射
可以通过 color 属性设置颜色映射函数，该函数的参数是节点数据对象，返回值为该节点矩形的颜色值。
----- ------- - --- ---------
-- ---
------ ------ -- -
-- ----------- - --- ------ ------
-- ----------- - --- ------ ---------
------ --------
-
---边框样式
可以通过 border 属性设置边框样式。
----- ------- - --- ---------
-- ---
------- -
------ -- -- --------- -
------ ------- -- --------- ------
------ -------- -- --------- -------
-
---坐标轴
tree-map 包也提供了可选的坐标轴。
----- ------- - --- ---------
-- ---
----- -
-- - -
-- -
----- ----- -- ---- - -
------ ---- -- --
---------- --- -- ----
----------- -------- -- ----
----- ------- -- ------ -- ---------
------ ------- -- -----
---------- -- -- -----
--
-- - -
-- -
----- ----- -- ---- - -
------ ---- -- --
---------- --- -- ----
----------- -------- -- ----
----- ------- -- ------ -- ---------
------ ------- -- -----
---------- -- -- -----
-
-
---示例代码
---- -------------------
------- -----------------------------------------------------
--------
----- ---- - -
- ----- ---- ------ -- --
- ----- ---- ------ -- --
- ----- ---- ------ --- --------- -
- ----- ------ ------ -- --
- ----- ------ ------ -- -
---
- ----- ---- ------ -- -
--
----- ------- - --- ---------
---------- -----------
-----
------ ----
------- ----
------ ------ -- -
-- ----------- - --- ------ ------
-- ----------- - --- ------ ---------
------ --------
--
------- -
------ --
------ -------
------ --------
--
----- -
-- - ----- ----- ------ --- --
-- - ----- ----- ------ --- -
--
-------- ------ -- -
-----------------
-
---
-----------------
---------总结
tree-map 是一个简单易用，可定制性高的 npm 包，能够将数据呈现为矩形树状图。在实际开发中，只需要按照上述使用方法，根据自己的需求对其进行各种配置即可实现丰富的交互式树状图可视化效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056ccc81e8991b448e6566