d3トランジションのあるsvgテキストを使用して、d3を使用してテキストをアニメーション化しようとしています。単一の文字列に対して必要に応じて機能しています。
json オブジェクトの配列から文字列を繰り返し処理したいと考えています。
これもできます。
すべてのペイントとトランジションはうまく機能します。問題は、それらがすべて同時に発生し、互いに積み重なって表示され、すべてが同時にアニメーション化されることです。
それらを setTimeout() に入れて、順番に表示しようとしました。
それでも機能しません。
for ( i in haikuStr ) {
if( i !=0 ){
//Make it wait if an appropriate time it is not the first one
setTimeout( function() {
showText();
}, 11000 * i );
} else {
//if i=0, don't make folks wait
showText();
}
}
showText() 関数は完全なコンテナの作成 -> トランジションの終了です。
11000 * i を使用して、2 回を超える反復で i ごとに 11 秒追加されるようにします。
私はかなりの時間を読んで、次の行を描くために循環する前にループを一時停止する方法を理解しようとしました。
任意の考えやアイデアをいただければ幸いです。
テキストが乱雑になるのを見たい場合は、時間のない例を次に示します。