Cytoscape.js——（试图学习）数据分析与可视化插件的使用

官网给出的调用方式：

1 <script src="cytoscape.min.js"></script>

或者

1 <script type="module">
2 import cytoscape from "./cytoscape.esm.min.js";
3 </script>

可以使用的程序包在cytoscape/dist/目录下，你可以通过npm下载：

npm install cytoscape

或者你也可以直接从GitHub上clone下来使用。

1 cytoscape.min.js : 一个包含包中所有依赖项的小型UMD构建。这个文件对一些小的页面很有用，比如说可以作为某篇学术论文的补充材料。
2 cytoscape.umd.js : 包含包中所有依赖项的非小型UMD构建。这个文件对于一些小的页面的调试很有用，同样可以作为学术论文的补充材料。
3 cytoscape.esm.min.js : 一个小型ESM（导入/导出）构建，包含包中所有的依赖项。此文件的用途与上述相同，但它可以作为ES6模块导入而不需要打包。
4 cytoscape.cjs.js : 一个没有任何捆绑依赖关系的非小型CJS（Node.js）构建。这将由Node.js或类似于捆绑包的Webpack通过require（'cytoscape'）自动使用。
5 cytoscape.esm.js : 无任何捆绑依赖项的非小型ESM（导入/导出）生成。这将由Node.js或类似于捆绑包的Webpack通过import cytoscape from 'cytoscape'自动使用。

 Cytoscape.js的一个实例对应于一个图。您可以创建一个实例，如下所示：

1 var cy = cytoscape({
2   container: document.getElementById('cy') // container to render in
3 });

为了方便起见，可以将jQuery实例作为容器传递：

1 var cy = cytoscape({
2   container: $('#cy')
3 });

 核心API

 一个简单的demo

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title>cytoscape demo</title>
 5     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
 6     <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
 7     <script>
 8       document.addEventListener('DOMContentLoaded', function () {
 9         var cy = window.cy = cytoscape({
10           container: document.getElementById('cy'),
11           style: [
12             {
13               selector: 'node',  //节点信息
14               style: {
15                 'background-color': '#7B68EE',
16                 'content': 'data(id)'
17               }
18             },
19 
20             {
21               selector: 'edge',  //边信息
22               style: {
23                 'curve-style': 'bezier',
24                 'target-arrow-shape': 'triangle'
25               }
26             }
27           ],
28           elements: {
29             nodes: [
30               { data: { id: 'a' } },
31               { data: { id: 'b' } }
32             ],
33             edges: [
34               { data: { id: 'ab', source: 'a', target: 'b' } }
35             ]
36           },
37           layout: {
38             name: 'grid'
39           }
40         });
41       });
42     </script>
43   </head>
44   <body style="background-color: grey;">
45     <div id="cy"></div>
46   </body>
47 </html>

 

posted @ 2020-04-05 16:46  TO_BE_HEALING  阅读(1033)  评论(0)  编辑  收藏  举报