antvis / antvis/layout

深度较大的数据初始渲染时,dfs递归导致内存溢出

Open
#75 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
276
Forks
60
PR merge metrics
No merged PRs in 30d

Description

使用g6时遇到了一个问题,如下demo

[demo](https://codesandbox.io/s/blazing-paper-j0dwu6?file=/src/App.vue)

![image](https://user-images.githubusercontent.com/27846243/157398401-ba3268ca-6728-4a80-a8b0-6bb7f81948be.png)

demo中是2000条首尾相连的数据,布局模式使用Dagre

定位到 https://github.com/antvis/layout/blob/master/src/layout/dagre/src/order/init-order.ts 里面的方法dfs

```typescript
const dfs = (v: string) => {
if (visited.hasOwnProperty(v)) return;
visited[v] = true;
const node = g.node(v);
if (!isNaN(node.rank as number)) {
layers[node.rank as number].push(v);
}
g.successors(v)?.forEach((child) => dfs(child as any));
};
```
此demo中图的深度较大,猜测是递归pending的dfs函数过多导致内存溢出。本地调试改为bfs后不再报错(但导致了初始化时图不居中)

```typescript
const dfs = (v: string) => {
let cur = [v];
while(cur.length) {
let temp: any[] = [];
cur.forEach((item: any) => {
if (visited.hasOwnProperty(item)) return;
visited[item] = true;
const node = g.node(item);
if (!isNaN(node.rank as number)) {
layers[node.rank as number].push(item);
}
temp = [...temp, ...(g.successors(v) || [])];
});
cur = temp;
}
};
```

![image](https://user-images.githubusercontent.com/27846243/157399612-658980a8-c624-48bb-a8e0-a8a41c8f4e94.png)

不知是否有相关的配置可以解决这个问题,或者说一个不成熟的建议是提供给用户可选dfs或者bfs进行初始布局?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.