介绍
relationship.js 是一个轻量级的 JavaScript 库，它提供了一个方便的方式来表达关系图数据，并可将其呈现为可定制的关系图形式。本文将介绍如何使用 relationship.js 来实现自定义关系图，并将包含详细的教程和示例代码。
安装
安装 relationship.js 很简单，只需要在终端中运行以下命令：
npm install relationship.js
用法
首先，在需要使用 relationship.js 的 HTML 文件中，需要先导入库文件：
<script src="./node_modules/relationship.js/dist/relationship.min.js"></script>
接下来，创建 relationship.js 的实例：
const rel = new Relationship({...options});现在，让我们来看一下可用的选项和方法。
选项
以下是可以用于创建关系图的选项：
el：要将关系图呈现到的 DOM 元素。它应该是一个元素选择器或 DOM 元素。data：关系图数据。应该是一个对象数组，其中每个对象都描述了一个节点。每个节点对象应至少具有id属性，表示该节点的唯一 ID。还可以指定其他属性，例如label表示名称，group表示节点所属的组，value表示节点的值，image表示该节点的图像等。links：节点之间的链接。应该是一个 ID 数组，其中每个元素都包含两个节点的 ID，以及它们之间的链接类型。layout：关系图布局方式。可以是以下值之一：force（力导向图），hierarchical（分层）或radial（径向）。forceOptions：如果使用了force布局，可以指定一些定制化的力导向图属性。hierarchicalOptions：如果使用了hierarchical布局，可以指定一些定制化的分层图属性。radialOptions：如果使用了radial布局，可以指定一些定制化的径向图属性。nodeOptions：属性中的节点设置选项，允许你定义节点属性，如size、color、opacity等等。linkOptions：属性中的链接设置选项，允许你定义链接属性，如width、color、opacity等等。
方法
以下方法可用于关系图的可视化：
draw()：绘制关系图。redraw()：重新绘制关系图。setSize(width, height)：设置关系图的宽度和高度。zoomIn(scale)：将关系图放大指定的缩放比例。zoomOut(scale)：以指定的缩放比例缩小关系图。zoom(scale)：以指定的比例缩放关系图。getZoom()：获取关系图的缩放比例。resetZoom()：将缩放比例重置为 1。fit()：将关系图适应其容器大小。destroy()：销毁关系图。
示例
以下是一个基本的示例：
-- -------------------- ---- -------
--------- -----
------
------
-----------------
------- -----------------------------------------------------------------------
-------
---- -
------ ------
------- ------
-
--------
-------
------
---- ---------------
--------
----- --- - --- --------------
--- -------
----- -
---- ---- ------ -----
---- ---- ------ -----
---- ---- ------ -----
---- ---- ------ -----
---- ---- ------ ----
--
------ -
----- ---- ----------
----- ---- ----------
----- ---- ---------
----- ---- --------
--
------- --------------
---
-----------
---------
-------
-------以上示例创建一个包含 5 个节点和 4 条链接的分层图。如果需要更复杂的布局，可以使用不同的选项来定制不同类型的图形。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067012e361a36e0bce8db3