在前端开发中，有时需要在 wiki 页面中展示一些复杂的关系图表，这时候就需要使用到 cytoscape.js 这个库。为了方便，已经有人封装了一个 npm 包 wiki-plugin-cytodemo，下面来介绍一下它的使用方法。
安装
首先需要在项目中安装 wiki-plugin-cytodemo 这个 npm 包，可以使用以下命令进行安装：
npm install wiki-plugin-cytodemo
引用
安装完成后，在需要使用的页面上引用 cytoscape.js 和 wiki-plugin-cytodemo 两个文件：
<script src="//unpkg.com/cytoscape/dist/cytoscape.min.js"></script> <script src="//cdn.jsdelivr.net/npm/wiki-plugin-cytodemo/dist/wiki-plugin-cytodemo.min.js"></script>
使用
创建一个 DOM 容器
cytoscape.js 会在一个 DOM 容器内渲染关系图表，首先需要在页面上创建一个容器：
<div id="cy"></div>
创建配置对象
关系图表的样式和数据都由配置对象决定，可以根据具体需求进行配置。以下是一个简单的配置对象示例：
var config = {
container: document.getElementById('cy'),
elements: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{ data: { id: 'ab', source: 'a', target: 'b' } }
]
};这个配置对象会渲染一个包含两个节点（a 和 b）和一条边的关系图表。
初始化 cytoscape.js
有了配置对象之后，就可以让 cytoscape.js 初始化关系图表了：
var cy = cytoscape(config);
使用 wiki-plugin-cytodemo
为了方便在 wiki 页面中使用关系图表，可以使用 wiki-plugin-cytodemo 这个插件。只需要创建一个代码块，把上述初始化 cytoscape.js 的代码放进去即可：
-- -------------------- ---- -------
--
----
-------
--------------------
--
--- --------- - ------------------------------
--- -- - -----------
---------- ----------
--------- -
- ----- - --- --- - --
- ----- - --- --- - --
- ----- - --- ----- ------- ---- ------- --- - -
-
---
-- ------- --代码块中的 wiki-plugin-cytodemo 关键字会告诉 wiki 页面，这里需要使用这个插件。请确保在代码块上也引用了 cytoscape.js 和 wiki-plugin-cytodemo.js。
更多配置
通过配置对象还可以设置节点和边的样式、事件处理函数等等，具体可以参考 cytoscape.js 的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710c8dd3466f61ffe169