項目内容が更新された要素の文字を赤く点滅させる

説明

D3.jsで項目内容が更新された要素の文字を赤く点滅させるにはデータが変更された場合にtransition()メソッドとstyle()メソッドを使って文字色を変更します。赤く点滅させるには、この後さらにtransition()メソッドを記述します。その直後にstyle()メソッドを使って文字の色を黒色にします。その際、duration()メソッドを使って文字が元の色に戻るまでの時間をミリ秒で指定します。
これ以外の説明についてはこちらのページを参照してください。

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

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>
<button id="btn">1ヶ所ずつデータを更新</button>
<div id="result"></div>
<script src="js/sample.js"></script>
</body>
</html>

JavaScriptコード

var dataList = [10, 50, 60, 30, 25];
// データを新たに生成する
var obj = d3.select("#result").selectAll("p")
	.data(dataList)
	.enter()
	.append("p")
	.text(function(d){ return d; });
// ボタンクリックで処理する
d3.select("#btn").on("click", function(){
	// 1ヶ所だけデータを変更する
	var ptr = Math.floor(Math.random()*dataList.length);
	var n = Math.floor(Math.random()* 100);
	dataList[ptr] = n;	// 配列内に配列要素値を入れる
	// データを更新 (update)
	obj.data(dataList)
		.text(function(d){ return d; })	// 内容を書き換える
		.transition()
		.duration(100)
		.style("color", function(d, i){
			if (i === ptr){	// 更新された箇所か調べる
				return "red";	// 更新時は赤色にする
			}else{
				return "black";	// そうでない場合は黒色にｓる
			}
		})
		.transition()
		.duration(2000)
		.style("color", "black");
});