Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
#75 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
typescript

Línea de trabajo

Comienza con src/layout/dagre/src/order/init-order.ts y la función dfs; después, reproduce el problema usando el CodeSandbox enlazado con 2.000 nodos conectados y el layout de Dagre. Compara un recorrido iterativo con la recursión existente y verifica que la inicialización se complete sin desbordamiento, preservando el centrado esperado del grafo y el orden de las capas.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

demo

image

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

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

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后不再报错(但导致了初始化时图不居中)

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

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

Lenguaje dominante
TypeScript
Estrellas
280
Forks
61
Métricas de merge de PR
Sin PR fusionados en 30 d

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de antvis/layout

Todos los issues de antvis/layout

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.