Cytoscape.js 是一个用于在网页上创建交互式图形可视化的 JavaScript 库，它提供了丰富的功能和灵活的配置选项，使得开发者可以轻松地构建各种类型的图形应用，如社交网络分析、生物医学网络展示、组织结构图等。
一、基础概念
1、容器（Container）：指定 Cytoscape.js 实例渲染的 HTML 元素容器，可以通过document.getElementById 或 jQuery 选择器来获取该元素。
2、元素（Elements）：包括节点（nodes）和边（edges），节点表示图中的实体，边表示实体之间的关系，每个元素都可以有自己的数据属性，用于存储相关信息。
3、样式（Style）：用于定义节点和边的外观和行为，可以使用 CSS 样式规则来设置元素的样式，如颜色、形状、字体等。
4、布局（Layout）：确定图中节点的位置和连接方式，Cytoscape.js 提供了多种内置的布局算法，如网格布局、圆形布局、随机布局等，也可以使用自定义的布局算法。
二、简单示例
以下是一个使用 Cytoscape.js 创建简单图形的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Cytoscape.js 示例</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div id="cy"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
style: [
{
selector: 'node',
style: {
'background-color': '#7B68EE',
'content': 'data(id)'
}
},
{
selector: 'edge',
style: {
'curve-style': 'bezier',
'target-arrow-shape': 'triangle'
}
}
],
elements: {
nodes: [
{ data: { id: 'a' } },
{ data: { id: 'b' } }
],
edges: [
{ data: { id: 'ab', source: 'a', target: 'b' } }
]
},
layout: {
name: 'grid'
}
});
});
</script>
</body>
</html>
在这个示例中，我们首先引入了 Cytoscape.js 的核心脚本文件，在 HTML 中创建一个div 元素作为 Cytoscape.js 实例的容器，并设置其样式使其占据整个页面，在 JavaScript 中使用cytoscape 函数创建一个 Cytoscape.js 实例，并将其绑定到容器元素上，我们通过style 属性设置了节点和边的样式，通过elements 属性定义了图中的节点和边的数据，最后使用layout 属性指定了布局算法为网格布局。
三、常见问题解答（FAQs）
1、如何更改节点的颜色？
可以通过修改style 数组中的节点样式规则来实现，将节点的背景颜色更改为红色：
style: [
{
selector: 'node',
style: {
'background-color': 'red', // 将背景颜色更改为红色
'content': 'data(id)'
}
},
{
selector: 'edge',
style: {
'curve-style': 'bezier',
'target-arrow-shape': 'triangle'
}
}
]
2、如何添加新的节点和边？
可以使用cy.add 方法向图中添加新的节点和边，添加一个新的节点和一个从新节点到已有节点的边：
var newNode = cy.add({ group: 'nodes', data: { id: 'c' }, position: { x: 200, y: 200 } });
var newEdge = cy.add({ group: 'edges', data: { id: 'bc', source: 'b', target: 'c' } });
四、小编有话说
Cytoscape.js 是一个非常强大的图形可视化库，它不仅提供了丰富的功能和灵活的配置选项，还具有良好的性能和可扩展性，无论是初学者还是有经验的开发者，都可以通过 Cytoscape.js 快速创建出美观、交互性强的图形应用，希望本文的介绍能够帮助你更好地理解和使用 Cytoscape.js，如果你在使用过程中遇到任何问题，欢迎随时提问。
