0

を使用してアイテム間の関係を表示する Web アプリを作成してVis.jsいます。それらの間に ~1200 のエッジを持つ ~260 のノードを表示する必要があるポイントに到達するまで、すべてが完全に正常に機能します。

そのノード数に達すると、グラフには空白と青い線だけが表示され、他には何も表示されません。ズームしようとするとすぐに線が消えて真っ白です。

ノードの位置を見ると、それらの多くが負の位置または非常に大きなx, y位置にあることがわかります (通常、x の場合は -300、y の場合は約 478759527705558300000)。

物理を無効にしようとしましたが、無駄でした。グラフは階層モードで、レベルはコードで手動で設定されていますが、レベルは正しいです。

ネットワーク オプション (このimprovedLayoutオプションは、インターネットで見つけた可能性にすぎません。削除しても同じように機能します):

    var options = {
        layout: {
            improvedLayout: false,
            hierarchical: {
                direction: direction,
                sortMethod: "directed"
            }
        }
    }

スクリーンショット: スクリーンショット

4

2 に答える 2

1

約 615 のノードと 614 のエッジで構成される階層レイアウト グラフがあります (40 の奇数のクラスター ノードを除き、そのうちのいくつかはクラスターのクラスターです)。私はvisjsで同じ問題に遭遇しました。

この問題を解決するのに役立った簡単なことの 1 つは、反復回数を指定する引数を使用してnetwork .stabilize() メソッドを明示的に呼び出すことでした。デフォルトの繰り返しは 1000 です。10000 を超えると、グラフはうまく安定しました。さらに数秒かかりましたが、それで問題ありませんでした。しかし、ノード数が最大 1000 に増えると、安定化にかかる時間が急増します。そこで、解決策として visjs コードを調べ始めました。

visjs コードを見ていると、関数 setupHierarchicalLayout() 内に_condenseHierarchy()への呼び出しがあることがわかりました。このメソッドは、ノードとエッジの間の空白を最小限に抑えようとします (まだコードを完全に理解していません)。_condenseHierarchy() は、ノードの座標を変更します。以下の _condenseHierarchy() の呼び出し前後の Y 座標を参照してください。

(this.body.nodes["node-11"]).y
1530
(this.body.nodes["node-11"]).y
64920

ノードが離れた位置にある場合、グラフ内の他のノードと近づけるために (安定化で) 多くの反復が必要です。_condenseHierarchy() を無効にすると、グラフがきれいに表示されました。

_condenseHierarchy() を無効にすると、先に進むにつれて他の問題が発生すると確信しています。_condenseHierarchy() を理解し、実験するためにもう少し時間を費やすつもりです。

于 2017-01-07T00:59:56.547 に答える
0

この問題を解決するには、nodeSpacing、levelSeparation、treeSpacing などの階層レイアウト パラメータを調整します。これは、階層的なLayoutWithoutPhysicsの例です

于 2016-11-04T03:52:40.173 に答える