一定時間ごと処理する

説明

D3.jsで一定時間ごと処理を行うにはd3.timer()メソッドを使います。最初のパラメーターに定期的に呼び出す関数を指定します。D3.jsのタイマーはアニメーションタイマーでJavaScriptのrequestAnimationFrame()メソッドを使ったものと同じになります。d3.timer()メソッドのパラメーターが1つの場合は、指定した処理が画面の書き換えタイミング (1/60秒など)に合わせて処理されます。決められた時間ごと定期的に処理する場合はsetInterva()メソッドを使う方法もあります。

サンプル [サンプルを実行する]　[サンプルをダウンロード]

HTMLソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<h1>D3.jsサンプル</h1>
<div id="result"></div>
<script src="js/sample.js"></script>
</body>
</html>

JavaScriptコード

d3.timer(function(){	// タイマー設定
	d3.select("#result").text(new Date());	// 定期的に処理する内容
});