如果你需要在前端对网络或图表进行可视化操作，那么 Cytoscape.js 可能是一个不错的选择。Cytoscape 是一个 JavaScript 库，它提供了一种易于使用、高度可定制的方法来创建交互式网络和图表。
本文将深入介绍如何使用 Cytoscape.js（以下简称 cytoscape）这个 npm 包，并提供具体的示例代码以及相关指导意义。
安装
使用 npm 命令即可安装 cytoscape：
npm install cytoscape
基础用法
在 HTML 中，我们需要添加一个容器来显示 cytoscape 渲染出的图表。例如：
<div id="cy"></div>
然后，在 JavaScript 中，我们可以通过以下方式初始化 cytoscape：
-- -------------------- ---- -------
------ --------- ---- ------------
----- -- - -----------
---------- ------------------------------
--------- -
- ----- - --- --- - --
- ----- - --- --- - --
- ----- - --- ----- ------- ---- ------- --- - -
--
------ -
-
--------- -------
------ -
------------------- -------
-------- ----------
-
--
-
--------- -------
------ -
-------- --
------------- -------
--------------------- -------
--------------------- ----------
-
-
--
------- -
----- ------
-
---这里，我们首先引入了 cytoscape 包，并使用 cytoscape() 方法初始化了一个实例。在 container 属性中指定了渲染容器的 DOM 元素，在 elements 属性中指定了图表中包含的元素及它们之间的关系，在 style 属性中指定了图表中各个元素的样式，在 layout 属性中指定了布局算法。
以上代码将生成以下的网络图表：
更多用法
除了上述基础用法外，cytoscape 还提供了很多其他功能和扩展。例如，可以使用较为复杂的布局算法、添加事件监听器、自定义样式等等。
在下面的示例代码中，我们将演示如何通过鼠标拖拽来交互式地调整节点位置：
-- -------------------- ---- -------
------ --------- ---- ------------
------ ----------- ---- -------------------------
---------------------------
----- -- - -----------
---------- ------------------------------
--------- -
- ----- - --- ---- ------ --- - --
- ----- - --- ---- ------ --- - --
- ----- - --- ---- ------ --- - --
- ----- - --- ----- ------- ---- ------- --- - --
- ----- - --- ----- ------- ---- ------- --- - -
--
------ -
-
--------- -------
------ -
------------------- -------
-------- -------------
-
--
-
--------- -------
------ -
-------- --
------------- -------
--------------------- -------
--------------------- ----------
-
-
--
------- -
----- --------------
-
---
--------------------- --------------- -
----- ---- - -------------
----------------- ------------ --- ----- -- -------- ---------------------- ------------------------
---在这个例子中，我们引入了 cytoscape-cose-bilkent 扩展包，并使用 `
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33586