介绍
treevis 是一个可视化数据结构的 npm 包，能将任何树形结构可视化，支持拖拽，可以用于展示组织架构图、树状分类等。该包使用 SVG 来绘制树形结构，支持自定义样式和交互，是实现树形结构可视化的一种有效途径。
安装
使用 npm 安装：
npm install treevis --save
使用示例
引入
import Treevis from 'treevis';
初始化
-- -------------------- ---- -------
--- --------- - ------------------------------------- -- --
--- ------- - -
-------------- ---
----------- ---
---------- ---
------------ ---
----------- ----
--
--- ---- - -
--- -------
------ ------
--------- -----
--------- -
- --- -------- ------ ----- --
- --- -------- ------ ----- --
-
--- --------
------ ------
--------- -
- --- -------- ------ ----- --
- --- -------- ------ ----- --
--
--
--
--
--- ---- - --- ------------------ ----- ---------样式定制
treevis 提供许多从外部修改样式的选项，可以轻松地自定义树的外观。样式选项由以下类别组成：
节点选项（Node Options）
用于控制节点的外观及行为，包括：
nodeRadius- 节点半径nodeWidth- 节点宽度strokeWidth- 边框宽度stroke- 边框颜色fill- 填充颜色textColor- 文本颜色textSize- 文本大小onNodeClick- 单击回调函数onNodeContextMenu- 右键菜单回调函数onNodeDblClick- 双击回调函数
连接器选项（Connector Options）
用于控制连接器的外观及行为，包括：
lineColor- 线条颜色lineWidth- 线条宽度curvature- 线条曲率
层级间距选项（Level Separation Options）
用于控制层级间距，包括：
numSeparation- 节点之间的垂直距离spacingVert- 层级之间的垂直距离spacingHor- 节点之间的水平距离
示例
-- -------------------- ---- -------
--- ------- - -
-------------- ---
----------- ---
---------- ---
------------ ---
----------- ----
---------- --------
----- ----------
------- ----------
------------ --
---------- -------
---------- ----
---------- ----
------------ -------------- -
------------------
--
------------------ -------------- -
-------------------- ------- ------
--
--------------- -------------- -
------------------- -------- ------
--
--
--- ---- - --- ------------------ ----- ---------结语
Treevis 是一个非常好用的 npm 包，提供了许多参数可以控制树形结构的外观和行为，并且使用简单。在实际项目中，我们可以用它来实现组织架构图、分类树、地区树等各种树形结构的可视化，大大提高了用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab681e8991b448d8501