フォースレイアウトに基づくグラフがあります。グラフがノードの配置を完了するまで、「読み込み中」のオーバーレイを配置したいと思います。グラフが完成したことを確認するには、どのイベント/プロパティを使用できますか?
APIを確認しましたが、何も見つかりませんでした..
フォースレイアウトに基づくグラフがあります。グラフがノードの配置を完了するまで、「読み込み中」のオーバーレイを配置したいと思います。グラフが完成したことを確認するには、どのイベント/プロパティを使用できますか?
APIを確認しましたが、何も見つかりませんでした..
ドキュメントから、end
イベントはレイアウトが完了したとき、つまり when に送出されforce.alpha === 0
ます。
したがって、次の方法でいつ完了したかを確認できます。
force
.nodes(yourNodes)
.links(yourLinks)
.on('tick', function() {
// layout is in progress
})
.on('end', function() {
// layout is done
callback();
});
レイアウトが収束force.alpha()
すると、 は 0 に設定されます。それをポーリングするタイマーを設定すると (それほど頻繁ではありません!)、作業が完了したことがわかります。
この例ではinterval
、レイアウトが停止するまでミリ秒ごとに再試行する必要があります。変数timer
は現在のタイマーを保持します。レイアウトが完了するのを待ちたくない場合は、リセットできます。
var timer = null;
function onCompletion(force, callback, interval) {
interval = interval || 300;
function retryIfRunning() {
if (force.alpha() != 0)
timer = setTimeout(checkAndRetry, interval);
else {
timer = null;
callback();
}
}
retryIfRunning();
}
これは、ノードの配置で行われたと見なす内容に依存するため、組み込み機能としては不可能です。それを行う方法は、グラフのサイズと必要な精度に応じて、tick
関数n
回を呼び出すことです。n
#force.tick(): フォース レイアウト シミュレーションを 1 ステップ実行します。
force.tick()
詳細を知りたい場合は、ドキュメントを読むことをお勧めします: https://github.com/mbostock/d3/wiki/Force-Layout#wiki-tick