ohmu 是一个用于生成对象嵌套关系可视化图的 JavaScript 库。如果你需要在前端项目中可视化对象关系，ohmu 是一款非常不错的工具。
安装
ohmu 是 npm 包，你可以在终端中输入如下命令进行安装：
npm install ohmu
基本用法
首先，在你的 HTML 文件中引入 ohmu 的 JavaScript 文件：
<script src="./node_modules/ohmu/dist/ohmu.js"></script>
然后，你需要创建一个节点，它会作为图表的父级容器：
<div id="chart-container"></div>
接下来，你需要定义你的数据，这是 ohmu 开始工作的地方。比如，你的数据如下：
-- -------------------- ---- -------
----- ---- - -
----- ----
--------- -
-
----- ----
--------- -
-
----- ----
--------- -
-
----- ---
--
-
----- ---
-
-
--
-
----- ---
-
-
--
-
----- ---
-
-
--最后，你需要使用 ohmu() 函数来创建可视化图：
const chart = ohmu(document.querySelector("#chart-container"), data);
chart.draw();这样，你就可以看到一个基本的关系图表。
深度探究
ohmu 的 API 是相当简单的：
ohmu()函数接收两个参数：容器元素和数据对象。ohmu()函数将返回一个Chart实例，Chart实例包含draw()方法用于绘制图表，以及减少图表的方法。ohmu()在你的数据中搜索children属性，并将其解释为节点的子元素。- 你可以传递一个选项对象给
ohmu()函数，这个选项对象包含有定制化配置。
默认情况下，ohmu 会将数据对象的 name 属性用作节点的标签。但这可以通过传递一个选项对象来覆盖：
-- -------------------- ---- -------
----- ---- - -
--- ----
------ --------
--------- -
-
--- ----
------ -------
--------- -
-
--- ----
------ --------
--------- --
-
-
-
-
--
----- ------- - -
---------- - -- ------------
--
----- ----- - ------------------------------------------------ ----- ---------此时，你的节点标签应该为 alpha、beta 和 gamma。
ohmu 还允许你通过在选项对象中提供不同的类型来定制化不同的节点：
-- -------------------- ---- -------
----- ------- - -
---------- -
----- -
---------- -------
------------ --------------
---------- -----------
--
--------- -
---------- ------------
------ ----------
------ --
------- ---
-
-
--这里我们定义了两种节点类型，node 和 leafNode。node 类型的节点由一个圆圈和一个标签组成。而 leafNode 由一个五边形和一个文本组成。
这里涉及到的 CSS 类需要在样式表中定义，这里只需要简单说明一下它们的功能即可。
以上是一些基础用法和定制化的方式，如果你想了解更多定制化配置的选项和 API，可以查看 ohmu 在 GitHub 中的文档。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
------- ------------------------------------------------
-------
----- -
----- -----
------- ----------
------------- ----
-
------------ -
------- ------
------------- ------
-
---------- -
----- ---- -----------
------------ -------
-
---------- -
----- -----
------- ------
------------- ----
-
---------- ------- -
----- -----
------- ------
------------- ------
-
---------- ---- -
----- ---- -----------
------------ -------
----- ------
-
--------
-------
------
---- ---------------------------
--------
----- ---- - -
----- ----
--------- -
-
----- ----
--------- -
-
----- ----
--------- -
-
----- ---
--
-
----- ---
-
-
--
-
----- ---
-
-
--
-
----- ---
-
-
--
----- ------- - -
---------- - -- ------------
---------- -
----- -
---------- -------
------------ --------------
---------- -----------
--
--------- -
---------- ------------
------ ----------
------ --
------- ---
-
-
--
----- ----- - ------------------------------------------------ ----- ---------
-------------
---------
-------
-------这是一个基本的 ohmu 实例代码。你可以进行一些测试和实验，来发现更多有趣的特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066fac3d1de16d83a6711f