説明
D3.jsで1秒ごとに更新されるデータをテーブルに出力するにはenter()、exit()、remove()としてJavaScriptのsetInterval()を使います。サンプルでは更新されるデータはプログラムによって生成しています。（乱数値）
まず、selectAll()メソッドでtr要素を指定します。これがデータ(__data__)の格納先の要素になります。data()メソッドでデータを取得しenter()とappend()メソッドを使ってテーブルのセル要素(tr,td)を生成します。次にselectAll()として不要なtr要素を削除します(tr要素の削除で子要素であるtd要素も削除されます)。これはexit()メソッドとremove()メソッドを組み合わせます。
最後にデータの更新を行います。書き換えるデータの要素はtr要素ではなくtd要素なのでselectAll("td")とします。data()メソッドでデータを取得しtext()メソッドで内容を出力します。あとは、setInterval()メソッドで1秒ごと処理を呼び出せばできあがりです。
HTMLソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<style>
table,td { border : 1px solid black; }
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<h1>D3.jsサンプル</h1>
<table id="result"></table>
<script src="js/sample.js"></script>
</body>
</html>
JavaScriptコード
setInterval(function(){
var list = [ ];
// ランダムな個数でランダムなデータを生成
var n = Math.floor(Math.random() * 10) + 1;
for(var i=0; i<n; i++){
list.push(Math.floor(Math.random() * 1000));
}
outputData(); // 生成
removeData(); // 削除
updateData(); // 更新
// 要素を出力する関数
function outputData(){
d3.select("#result") // table要素を選択
.selectAll("tr") // tr要素を__data__保存の対象にする
.data(list) // 対象になるデータ
.enter() // データの数だけ以下の続く要素を追加
.append("tr") // tr要素を追加
.append("td") // td要素を追加
}
// 要素（とデータ）を削除する関数
function removeData(){
d3.select("#result") // table要素を選択
.selectAll("tr") // tr要素を削除対象にする
.data(list) // 対象になるデータ
.exit() // 要素数がリスト数より多い場合は以下の処理を実行
.remove(); // 要素を削除する
}
// 要素の内容を更新する関数
function updateData(){
d3.select("#result") // table要素を選択
.selectAll("td") // データの出力先をtd要素を対象にする
.data(list) // 対象になるデータ
.text(String); // 内容をそのまま文字列で出力
}
}, 1000);