介绍
cytoscape-popper 是一个基于 cytoscape.js 的插件，它提供了一种在 Cytoscape.js 中创建弹出式窗口（popper）的方式。这个插件可以让你在使用 cytoscape.js 进行图形可视化时，更加灵活地控制节点上的信息展示。
安装
安装 cytoscape-popper 可以通过 npm 命令进行：
npm install cytoscape-popper
使用
为了使用 cytoscape-popper，你需要首先引入 cytoscape.js，并将其实例化，然后再引入 cytoscape-popper 插件：
import cytoscape from "cytoscape"; import popper from "cytoscape-popper"; // 引入样式文件 import "cytoscape-popper/cytoscape-popper.css"; // 注册插件 cytoscape.use(popper);
接下来，我们可以设置节点的 popover 选项，在节点上添加一个 popper 元素，并且将节点的具体信息填充到 popper 中：
-- -------------------- ---- -------
----- -- - -----------
---------- ------------------------------
--------- -
------ -
- ----- - --- ---- ------ ----- -- - --
- ----- - --- ---- ------ ----- -- - --
- ----- - --- ---- ------ ----- -- - --
- ----- - --- ---- ------ ----- -- - --
- ----- - --- ---- ------ ----- -- - --
--
------ -
- ----- - ------- ---- ------- --- - --
- ----- - ------- ---- ------- --- - --
- ----- - ------- ---- ------- --- - --
- ----- - ------- ---- ------- --- - --
--
--
------- -
----- -------
--
-- ---- -------
------ -
-
--------- -------
------ -
------------------- -------
-------- --------------
-------- -------
--------- -------
-------------- ---------
-------------- ---------
------------ -------
----------------- ------
-
--
-
--------- --------------
------ -
------------------- --------
--------------- ------
--------------- -------
---------- -------
------------ -------
---------- -------
-------- --------
------------ -------
----------------- --------
-------------- ------
-------------- -------
-------- --
-
-
-
---
----------------------- -- -
----- ------- - -
-----
-------- -----------------
------- -- --- ----------- ----- ---- -----------------
------
--
-------------
-------- --------
------- -
---------- --------
-
---
---示例代码
下面是一个使用 cytoscape-popper 插件的完整示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------- ------------
---- -- ------------ ---- ---
------- ----------------------------------------------------------------------------
---- -- ---------------- -- ---
------- -------------------------------------------------------------------------------------
---- ------ ---
----- ------------------------------------------------------------------------- ---------------- --
-------
--- -
------- ------
------ -----
--------- ---------
----
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------