什么是 mtree
mtree 是一款基于前端框架 d3.js 的树形控件库，它支持数据绑定和自定义节点属性。mtree 能够帮助开发者快速创建丰富的树形控件，并且提供了豪华功能。
安装和使用
- 安装
npm install --save mtree
- 引入
import { tree } from 'mtree';
// 或
const tree = require('mtree');API
tree(options)
用于创建一棵树形控件。
参数
options(Object): 控件参数，包括:data(Object): 树形结构数据，默认为空树{}。linkColor(String): 连接线颜色，默认'black'。nodeColor(String): 节点颜色，默认'white'。nodeSize(Number): 节点大小，默认30。margin(Object): 控件内边距，默认{top: 20, right: 90, bottom: 30, left: 90}。width(Number): 控件宽度，默认960。height(Number): 控件高度，默认500。nodeClick(Function): 节点单击事件。nodeDoubleClick(Function): 节点双击事件。linkClick(Function): 连接线单击事件。linkDoubleClick(Function): 连接线双击事件。
返回值
返回一个 mtree 控件对象。
示例
- 绘制简单树形控件
-- -------------------- ---- -------
------ - ---- - ---- --------
----- ---- - -
----- -------
--------- -
-
----- ------ ---
--------- -
-
----- ------ -----
--
-
----- ------ -----
--
--
--
-
----- ------ ---
--
--
--
----- ------ - ------
-----
---
-------------------------------- 自定义节点属性
-- -------------------- ---- -------
------ - ---- - ---- --------
----- ---- - -
----- -------
----------- -
---- ---
------- -------
--
--------- -
-
----- ------ ---
----------- -
---- ---
------- ---------
--
--------- -
-
----- ------ -----
----------- -
---- --
------- -------
--
--
-
----- ------ -----
----------- -
---- --
------- ---------
--
--
--
--
-
----- ------ ---
----------- -
---- --
------- -------
--
--
--
--
----- ------ - ------
-----
--------- ---
---------- ------------
---
------------------ -- -
-------------------
---------- ---
---------- --- -- ---------- - --- - ---
--------- -- -
----- - ---- ------ - - ------------------
------ ----- ------- ------- -----------
---
---
-------------------------------总结
以上是 mtree 的使用介绍，通过简单的示例可以看出 mtree 库的功能强大，还有很多高级的 API 可供开发者自己使用。在实际开发过程中，如果需要创建树形控件，可以选择使用 mtree 库来提高效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb4e7b5cbfe1ea061138d