介绍
npm包 arbor 是一个轻量级的 JavaScript 可视化库，它可以帮助开发者快速构建出基于图形的交互式应用程序。它的特点在于能够自动布局和渲染节点和连接线，从而让用户专注于数据本身而非绘图。
安装
安装 arbor 最简单的方式是使用 npm 命令：
npm install arbor
快速开始
以下是一个最简单的示例，使用了 arbor 库来渲染一个简单的二叉树结构。
-- -------------------- ---- -------
--------- -----
------
------
------------ ------------
------- -----------------------------------------------------------
------- ----------------------------------------------------------------------------
-------
------
------- ------------- ----------- ----------------------
--------
--- --- - ------------------------- --- -----
-------------------------------
------------ - ----------------------
--- ----- - -
---- ---- ------ ----- ----
---- ---- ------ ----- ----
---- ---- ------ ----- ----
---- ---- ------ ----- ---
--
--- ----- - -
------ ---- --- -----
------ ---- --- -----
------ ---- --- ----
--
----------------- --------
---------
-------
-------在这个示例中，我们首先创建了一个 ParticleSystem 对象，然后通过 parameters 函数设置了重力效果。接着我们指定了 Renderer，并将其绑定到画布元素上。
然后我们定义了一些节点和连接线，并使用 graft 函数将它们添加到 ParticleSystem 中。
核心概念
ParticleSystem
ParticleSystem 是 arbor 的核心对象，它表示整个可视化系统。在 ParticleSystem 中，所有的节点和连线都可以被添加、删除和修改。同时，ParticleSystem 还负责自动布局和渲染节点和连接线。
以下是 ParticleSystem 构造函数的参数：
- repulsion: 节点之间的排斥力，默认值为
1000。 - stiffness: 连接线的弹性系数，默认值为
600。 - friction: 节点的摩擦力，默认值为
0.5。 - gravity: 是否开启重力效果，默认值为
false。
Node
Node 表示一个节点，它由以下属性组成：
- id: 节点的唯一标识符，必须是一个字符串类型。
- data: 节点所携带的数据，可以是任意类型的 JavaScript 对象。
- p: 节点的位置，一个包含
x和y属性的对象。 - mass: 节点的质量，默认值为
1.0。 - fixed: 节点是否固定，如果固定，则不会被自动布局。默认值为
false。
Edge
Edge 表示一条连接线，它由以下属性组成：
- from: 连接线的起点节点 ID。
- to: 连接线的终点节点 ID。
- length: 连接线的长度，默认值为
undefined。 - data: 连接线所携带的数据，可以是任意类型的 JavaScript 对象。
自定义样式
arbor 提供了一些简单的 API 来自定义节点和连接线的样式。以下是一个示例：
sys.renderer = Renderer("#viewport", {
node: {color: "red", shape: "dot
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/34160) ，转载请注明来源
[https://www.javascriptcn.com/post/34160](https://www.javascriptcn.com/post/34160)