Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
  • 何か問題がありますか？
#75 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
typescript
領域
data-visualization

調査の方向性

src/layout/dagre/src/order/init-order.ts と dfs 関数から始め、リンクされている CodeSandbox で 2,000 個の接続されたノードと Dagre レイアウトを使用して問題を再現します。反復トラバーサルと既存の再帰を比較し、グラフの期待される中央揃えとレイヤー順序を維持したまま、初期化がオーバーフローなしで完了することを確認します。

索引モデルが issue の本文から書いたものです。

説明

使用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进行初始布局?

主要言語
TypeScript
スター
279
フォーク
62
30日以内にマージされた PR はありません

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

antvis/layout のほかの issue

antvis/layout の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。