d3-hierarchy 是一个基于 D3.js 的 npm 包，可以用来构建各种层次结构图，包括树状图、打包图等等。在前端开发中，它被广泛应用于数据可视化和信息清晰展示。
安装
首先需要安装 d3-hierarchy 包。可以通过 npm 安装：
npm install d3-hierarchy
或者直接引入 js 文件：
<script src="https://d3js.org/d3-hierarchy.v2.min.js"></script>
基本使用
d3-hierarchy 可以通过提供的数据生成一个层次结构图。这个数据可以是 JSON 格式的对象，也可以是 CSV 或 TSV 格式的文件。
我们以一个简单的 JSON 数据为例：
-- -------------------- ---- -------
-
------- -----
----------- -
-
------- -----
----------- -
- ------- ---- --
- ------- ---- -
-
--
-
------- -----
----------- -
- ------- ---- --
- ------- ---- -
-
-
-
-然后可以通过如下代码生成图形：
-- -------------------- ---- -------
----- ---- - -- --- ---- -- ---
----- ---- - -------------------
-- ------- --- --
----- --- - ----------------
---------------- --- -- ------ ---------
-- -------
----- ---------- - ---------
------------- ---------
-- ------
-----------------
-- -------
-----------------------
-------------------------
--------
-----------------
----------- - -- ----
----------- - -- ----
---------- ---
---------------------
-------------------
--------
---------------
---------- -------------------
---- -- ----
---- -- ------这段代码会生成一个包含两个分支的树状图，如下所示：
高级使用
除了基本的树状图，d3-hierarchy 还提供了许多高级功能，比如：
打包图
打包图是一种用来表示数据集合的圆形层次结构图。可以通过如下代码生成打包图：
-- -------------------- ---- ------- ----- ---- - -- --- ---- -- --- ----- ---- - ------------------- -- ------- --- -- ----- --- - ---------------- ---------------- --- -- --------- ---------- -------------- ----- ------------- -- ------- ----- ---------- - --------- --------------- - -- -------- - --- ------------ -- ------ ----------------- -- ------- ----- ---- - ------------------ ------------------------- -------- ------------ ------------------ - -- ---------------------------- --------------------- ---------- - -- ---- --------------------- ---- ------------- - -- ---------- - ------ - -------- ------------- -- ------------ --------------- ------- -- ------------ ----------- -------- -------------------- ----------
这段代码会生成一个包含两个分支的打包图，如下所示：
布局参数
d3-hierarchy 支持多种布局参数，可以通过
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37546