項目内容が更新された要素の文字を赤色に変化させる

説明

D3.jsで項目内容が更新された要素を赤色に変化させるには、データを追加した場合に要素を変数に入れて起きます。サンプルではobjという名前の変数に格納しています。ボタンクリックでイベント処理するにはselect()メソッドで指定した要素に対してon()メソッドを使います。on()メソッドの2番目のパラメーターにイベント発生時に実行する関数を指定します。この関数内でデータの更新処理を行います。データが入っている配列に乱数を使って新しい値をセットします。
値をセットしたらdata()メソッドを使ってデータを更新します。更新したデータは、そのままでは画面に表示されません。画面にデータを表示するにはtext()メソッドを使って行います。変更された要素の文字を赤色に変化させるにはtransition()メソッドを使います。その後、style()メソッドを使ってスタイルシートプロパティであるcolorに色をセットします。変更された箇所かどうかはstyle()メソッドの2番目のパラメーターに関数を指定します。関数内で配列の位置と変更すべき要素の位置が等しいかどうか調べます。同じなら赤色を示すredの文字を、そうでない場合はblackの文字を返します。これで、データが更新された場合に文字の色がアニメーションしながら変化します。

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

HTMLソース

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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コード

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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()
        .style("color", function(d, i){
            if (i === ptr){ // 更新された箇所か調べる
                return "red";   // 更新時は赤色にする
            }else{
                return "black"; // そうでない場合は黒色にｓる
            }
        })
});