d3を使用してシミュレーションデモを作成しています。解の状態の進化を示したいと思います。
シミュレーションループにd3レンダリングを埋め込むと、ブラウザは最後まで何も表示しません。忙しいと思います。
私が達成したいのは、メインループ内で、計算とd3の更新を行い、すべての遷移が完了するのを待つことです。
遷移は非同期であるため、それらを待つ方法がわかりません。
setIntervalを使用してメインループを実行するように機能しますが、うまくいきません。
d3遷移を使用して計算をロックステップするという目標を達成するための「通常の」方法はありますか？
HTML5 では、これにアプローチする別の方法もあります。シミュレーションを別のスレッドWeb Workerで実行し、各反復で結果をメインのディスプレイ スレッドに戻すようにします。
http://www.html5rocks.com/en/tutorials/workers/basics/
実際、あなたのものはこれにほぼ完璧なアプリケーションです。
はい、あなたが述べたように、シミュレーションが同期的に実行されている場合 (たとえば、単一の for ループで)、ブラウザーは中間状態をレンダリングする機会がありません。
setInterval を使用することは実際には合理的な解決策ですが、間隔が少なくとも最長の (d3 ベースの) 遷移と同じ長さであることを確認する必要があります。
しかし、本当に必要なのは、コールバックまたはイベントを介して遷移がいつ終了したかを正確に知り、シミュレーションのステップ関数を呼び出して状態を進めることです。この場合、こちらをお読みください: Invoke a callback at the end of a transition .
私はそのアプローチを試したことはありませんが、複数の要素を移行している場合、移行のendイベントは複数回 (移行中の要素ごとに 1 回) 呼び出されると思います。この場合、それらを単一のイベントに結合するためにいくつかの作業を行う必要があります。イベントが呼び出された回数を「カウント」しend、カウントが予想される要素数と一致した場合にのみアクションを実行する必要がある場合があります。または、条件付きコードを記述して、単一の要素の遷移 (遷移が最後に開始されるか、最後に終了すると予想される要素) のみにバインドすることもできます。
お役に立てれば...