版本5.0.33
demo情况：最下边是一个在官网写的小demo 初始是122M，勾选toggleSelection全选后每拖动一次内存就会增加，可以看到内存从122->145->177-> 199->逐渐增长到了620M,拖动了大概30次，然后内存才恢复降低。但是由于实际项目更复杂，数据更多，可能还没等到释放内存就会很大，导致卡死，并且项目内存释放也是降的少增加的多，导致一直在增加。
实际项目：
- 初始90M->批量设置元素状态全部选中->143->拖拽所有选中的点->180->再拖拽232->再拖拽-> 257-> 再拖拽290->再拖拽 328 基本在持续增长
- 批量设置元素状态 先全部选中 再取消选中 反复5次（不执行其它操作）初始内存： 大概85M 内存稳定后： 165M 翻了一倍
- 缩放操作也会造成内存增长，但是元素少时不明显 当我点1500个，边同样1500个 初始280M->缩放操作放大到最大380->缩小到最小433->再放大521->再缩小667->最后稳定到600左右
demo内存对比图
demo代码
import { Graph } from '@antv/g6';
function generateRandomGraphData(nodeCount, edgeCount) {
const nodes = [];
const edges = [];
// 创建节点
for (let i = 0; i < nodeCount; i++) {
nodes.push({ id: i.toString() });
}
// 创建边
const possibleEdges = [];
for (let i = 0; i < nodeCount; i++) {
for (let j = i + 1; j < nodeCount; j++) {
possibleEdges.push([i.toString(), j.toString()]);
}
}
// 随机选择边
for (let i = 0; i < edgeCount; i++) {
if (possibleEdges.length === 0) break;
const randomIndex = Math.floor(Math.random() * possibleEdges.length);
const [source, target] = possibleEdges.splice(randomIndex, 1)[0];
edges.push({ source, target });
}
return { nodes, edges };
}
const graph = new Graph({
container: 'container',
autoFit: 'view',
animation: false,
data: generateRandomGraphData(500,500),
layout: {
type: 'antv-dagre',
nodeSize: [60, 30],
nodesep: 60,
ranksep: 40,
controlPoints: true,
},
node: {
type: 'rect',
style: {
size: [60, 30],
radius: 8,
labelText: (d) => d.id,
labelBackground: true,
badges:[
{
text: 'badge1',
placement: 'right-top',
padding: [3],
offsetX: -12,
backgroundFill: 'lightgreen',
},
{
text: 'badge2',
placement: 'right-bottom',
padding: [3],
offsetX: -12,
backgroundFill: 'lightgreen',
}
]
}
},
edge: {
type: 'line',
style:{
labelText: (d) => d.id,
}
},
behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
});
graph.render();
const diffSelectedStates = (elements, graph, state ='selected') => {
const states = elements.reduce((acc, { id, states = [] }) => {
acc[id] = states.includes(state)? states.filter((s) => s!== state) : [...states, state];
return acc;
}, {});
graph.setElementState(states);
}
window.addPanel((gui) => {
const config = {
toggleSelection: false // 新增的布尔值，用于控制是否切换选中
};
// 新增的 GUI 控件，用于切换选项
gui.add(config, 'toggleSelection').onChange((value) => {
const nodes = graph.getNodeData()
diffSelectedStates(nodes,graph)
});
});
IssueHunt
