D3.js-タイマーAPI

タイマーAPIモジュールは、同期されたタイミング遅延で同時アニメーションを実行するために使用されます。アニメーションには requestAnimationFrame を使用します。この章では、タイマーAPIモジュールについて詳しく説明します。

requestAnimationFrame

このメソッドは、アニメーションを実行することをブラウザに通知し、ブラウザが指定された関数を呼び出してアニメーションを更新することを要求します。

タイマーの構成

次のスクリプトを使用して、d3js.orgからタイマーを簡単に直接読み込むことができます。

<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script>
   var timer = d3.timer(callback);
</script>

タイマーAPIメソッド

Timer APIは、次の重要なメソッドをサポートしています。これらはすべて、次のように詳細に説明されています。

d3.now（）

このメソッドは現在の時刻を返します。

d3.timer（callback [、delay [、time]]）

このメソッドは、新しいタイマーをスケジュールし、停止するまでタイマーを呼び出すために使用されます。 MSに数値遅延を設定できますが、それ以外の場合はオプションであり、デフォルトはゼロです。時間が指定されていない場合、d3.now（）と見なされます。

timer.restart（callback [、delay [、time]]）

指定されたコールバックとオプションの遅延と時間でタイマーを再起動します。

timer.stop（）

このメソッドはタイマーを停止し、その後のコールバックを防ぎます。

d3.timeout（callback [、delay [、time]]）

最初のコールバックでタイマーを停止するために使用されます。コールバックは経過時間として渡されます。

d3.interval（callback [、delay [、time]]）

特定の時間遅延間隔で呼び出されます。遅延が指定されていない場合、タイマー時間がかかります。

例

Webページ「timerl」を作成し、それに次のスクリプトを追加します。

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> Timer API </h3>
      <script>
         var timer = d3.timer(function(duration) {
            console.log(duration);
            if (duration > 150) timer.stop();
         }, 100);
      </script>
   </body>
</html>

画面に次の応答が表示されます。

タイマーAPI

D3js-timer-api

目次