前言
在前端工程师的工作中，展示数据的方式往往需要依靠图表和网络拓扑图。而一个好的可视化图表库和网络拓扑图库往往是非常重要的工具之一。Cytoscape.js 就是其中势头非常强劲的一个库，它能解决关系可视化和可编辑网络拓扑图等问题。而 @bardit/cytoscape-expand-collapse 这个 npm 包则能为原有的 Cytoscape.js 提供一个非常好用的扩展——节点折叠和展开。
那么，接下来就让我们来认识一下这个 npm 包，以及如何使用它。
什么是 @bardit/cytoscape-expand-collapse
@bardit/cytoscape-expand-collapse 是一个基于 Cytoscape.js 制作的节点折叠和展开扩展。它为原有的 Cytoscape.js 功能提供了丰富的扩展，能让您更便捷地对节点进行折叠和展开。
这个 npm 包的主要功能包含了以下两个部分：
- 折叠/展开：选中节点，即可通过点击图标或切换选中状态的方式进行折叠/展开。
- 自动展开：在图加载时，通过设置自动展开的节点类型和数量，批量展开指定类型的节点。
下面，我们就来详细了解一下这个 npm 包的使用方法。
安装
要使用 @bardit/cytoscape-expand-collapse 这个 npm 包，您需要先安装它。安装很简单，只需要在项目中通过 npm 命令进行安装即可：
npm install cytoscape @bardit/cytoscape-expand-collapse --save
使用
接下来，我们来看一下如何使用这个 npm 包。
导入库
首先，您需要在 JavaScript 中正确导入库。
import cytoscape from 'cytoscape'; import expandCollapse from '@bardit/cytoscape-expand-collapse'; cytoscape.use(expandCollapse);
使用扩展
此时，我们就能在 Cytoscape.js 实例中使用 expand-collapse 扩展了。
-- -------------------- ---- -------
----- ----- - -
------ -
- ----- - --- --- - --
- ----- - --- --- - --
- ----- - --- --- - --
- ----- - --- --- - --
- ----- - --- --- - -
--
------ -
- ----- - --- ----- ------- ---- ------- --- - --
- ----- - --- ----- ------- ---- ------- --- - --
- ----- - --- ----- ------- ---- ------- --- - --
- ----- - --- ----- ------- ---- ------- --- - -
-
--
----- -- - -----------
---------- ------------------------------
--------- ------
------- - ----- ------ -
---
-------------------
------------------- --
-------- -----
--------- -----
----create 得到cy实例，然后把expandCollapse加入 -达到扩展的效果
方法
这个 npm 包有 3 个可选参数：
- defaultExpandDepth：默认展开深度，值为 0 代表不折叠，默认值为1
- animate：使用动画实现加入和移除节点时的淡入淡出效果，默认为 true
- undoable：是否可以撤销折叠/展开操作，默认为 false
除此之外，该 npm 包还有以下的几个方法。
cy.collapse(node)
- 折叠节点。
This will also hide the children of the collapsed node, and will trigger the collapse event.
Cy.collapse(nodes[, options])
Collapse an array of nodes using the specified collapse behavior. Options are passed to cy.expandCollapse(options) method with these changes:
- defaultCollapseDepth corresponds to defaultExpandDepth parameter.
- animate corresponds to animateExpanding parameter.
- undoable corresponds to undoable parameter.
This method is chainable.
cy.expand(node)
- 展开节点。
This will also show the children of the expanded node, and will trigger the expand event.
Cy.expand(nodes[, options])
逐个扩张给定的节点的所有子项（直到满足最小深度）。展开操作将隐藏折叠的节点。
这个方法是链式运算的。
cy.expandAll([options])
- 展开所有节点。
扩展必须通过可选参数options传递。Options是由cy.expandCollapse(options)方法传递的。此方法仅允许您扩展已折叠的节点仅一次，并且默认为最大允许深度。
这个方法是链式的, 对undo重要
cy.collapseAll([options])
- 折叠所有节点。
这个方法是链式的，对undo重要
例子
下面，我们来一个例子，以便您更好的理解如何使用这个 npm 包。
-- -------------------- ---- -------
--------- -----
------
------
------- -------------------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------------------------
-------
--- -
------ -----
------- -----
--------- ---------
---- --
----- --
-
--------
-------
------
---- --------------
--------
------------------------------
----- ----- - -
------ -
- ----- - --- --- - --
- ----- - --- --- - --
- ----- - --- --- - --
- ----- - --- --- - --
- ----- - --- --- - -
--
------ -
- ----- - --- ----- ------- ---- ------- --- - --
- ----- - --- ----- ------- ---- ------- --- - --
- ----- - --- ----- ------- ---- ------- --- - --
- ----- - --- ----- ------- ---- ------- --- - -
-
--
----- -- - -----------
---------- ------------------------------
--------- ------
------- - ----- ------ -
---
-------------------
------------------- --
-------- -----
--------- -----
---
---------
-------
-------当你打开这个例子时，你将会获得以下的展示：
上图展示了一个 Cytoscape.js 的实例，您可以通过鼠标选择和点击的方式对节点进行折叠和展开。同时，当一个节点被选择时，您还可以看到右侧的控制栏、折叠图标和漂亮的展开/折叠动画。
结语
在本文中，我们详细了解了 @bardit/cytoscape-expand-collapse 这个 npm 包的使用方法，同时还介绍了这个库的一些基本特性。我相信，当您熟悉这个库之后，您一定可以更便捷、更高效的编写节点折叠扩展效果。如果您还有什么问题或建议，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bb781e8991b448d9500