sigmajs 性能demo
时间: 2023-06-21 08:11:11 浏览: 38
以下是一个简单的 Sigma.js 性能演示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sigma.js Performance Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.1/sigma.min.js"></script>
<style>
#graph-container {
width: 800px;
height: 600px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="graph-container"></div>
<script>
const s = new sigma({
container: 'graph-container'
});
// 添加节点和边
const nodeCount = 1000;
const edgeCount = 2000;
for (let i = 1; i <= nodeCount; i++) {
s.graph.addNode({
id: `n${i}`,
label: `Node ${i}`,
x: Math.random(),
y: Math.random(),
size: 2,
color: '#666'
});
}
for (let i = 1; i <= edgeCount; i++) {
const source = `n${Math.ceil(Math.random() * nodeCount)}`;
const target = `n${Math.ceil(Math.random() * nodeCount)}`;
s.graph.addEdge({
id: `e${i}`,
source,
target,
color: '#ccc'
});
}
// 渲染图形
s.refresh();
</script>
</body>
</html>
```
该演示会随机生成 1000 个节点和 2000 条边,然后将它们显示在一个 800x600 的画布中。你可以通过修改 `nodeCount` 和 `edgeCount` 的值来增加或减少节点和边的数量。
请注意,在处理大型数据集时,Sigma.js 的性能可能会受到影响。因此,为了优化性能,应该使用 WebGL 渲染器,并尽可能减少节点和边的数量。