スコット・マレイ
コード・アーティスト

Tutorials > D3 > データの使い方

データの使い方

最終更新日 2012年12月30日(原文)  2013年03月30日(翻訳 / h.sakai

前章では、データを読み込み、それを新規生成した要素とバインドするところまで説明しました。しかしバインドはしたものの、そのデータはまだどこにも使われていません。この章では具体的なデータの使用法について解説します。下記のコードが前の章で作成したコードです。

var dataset = [ 5, 10, 15, 20, 25 ];

   d3.select("body").selectAll("p")
   .data(dataset)
   .enter()
   .append("p")
   .text("新しいパラグラフ!");

この最後の行を次のように書き換えます。

    .text(function(d) { return d; });

サンプル画面を見てみましょう。

成功です!元のデータセットの値を、各パラグラフのコンテントとして表示することができました。ここではdata()メソッドが大活躍しています。 data()メソッドを呼ぶことで、その後にチェインされたメソッドの中で、d を入力値として受け取れる無名関数が使えるようになるのです。引数 d に対して、現在与えられた要素に対応する元のデータセットの値が正しくセットされるように、陰で data() が働いているのです。

ここで仮引数を d としていますが、もちろん a でも b でも c でも data でも、JavaScript で変数として使える文字列であれば何でも構いません。しかし慣例として d を用います。

D3 が各エレメントをループして行くのにあわせ、「現在の要素」の値も変化して行きます。たとえば3回目のループのときには、上記コードは 3 つ目の p 要素を生成し、対応して d にはデータセットの 3番目の値(配列表記すれば dataset[2]、つまり 15 )がセットされます。そうして 3 つ目のパラグラフのテキストコンテントが「15」になるのです。

より高機能に

初心者向けに説明しておきますと、無名関数(あるいはメソッド)の基本的な書き方は次の通りです。

function(input_value) {
   // なんらかの計算
   return output_value;
}

引数(ひきすう)として input_value を受け取り、(通常その引数を使って)なんらかの計算を行い、その結果を戻り値 output_value として返します。

冒頭のサンプルで使った無名関数はいたってシンプルで、何も特別なことはしていません。

function(d) {
   return d;
}

無名関数の呼び出し時に、D3 によって暗黙に与えられる値を仮引数 d で受け取り、受け取った d をそのまま返しているだけです。

そしてこの無名関数は D3 の text() 関数に囲まれているため、その戻り値は text() へと渡されます。

.text(function(d) {
   return d;
});

もちろん無名関数の中身は好きに書き換えられますので、もっと実のあることもできます(これからしていきます)。JavaScript を書くことは楽しくもあり苦痛でもありますが、自分の思う通りのことが実現できるのです。先のシンプルな例を少し工夫してみましょう。少しテキストを追加したのがこちらのサンプルです。

.text(function(d) {
   return  d + " だよ!";
});

データには関数が必要

いちいち function(d)... と囲まなくても単に d と書くじゃだめなの?と思う人もいるでしょう。しかし、例えば次のようなコードは動作しません。

.text(d + " だよ!");

このコンテキストでは、無名関数で囲まれていない d は何も値を持たないからです。例えてみるとこの d は孤児のようなもので、d にはちゃんとした両親の暖かい庇護 - ここでは関数のカッコ - が必要なのです( え、「無名」の両親のどこがちゃんとしてるって?そういうつっこみは要りません)。

先の例で見る通り d はちゃんと関数内で使われています。

.text(function(d) {  // <-- d が優しくカッコで囲まれていることに注意
   return  d + " だよ!";
});

こうした構文を取り入れている理由は、.text()attr()、そのほかの多くの D3 のメソッドが、引数として関数を取るからです。たとえば text() は引数として静的な文字列を取ることもあれば…

.text("文字列")

関数の戻り値を取ることもあれば…

.text(someFunction())

今回のように無名関数そのものを取ることもあります。

.text(function(d) {
   return d;
})

最後の例では、text() 内で無名関数を定義しているのです。D3 は引数の中に関数を発見すると、その関数を呼びだすと同時に、現在のデータセットの値をその引数(ここでは d )に渡します。もし関数が無ければ、D3 は値を渡す相手を見つけられません。

最初のうちは、d を受け取るためだけにこんな仕掛けを作ることが、無意味でわずらわしいと感じるかもしれません。しかしもっと複雑な例を見れば、このアプローチの真価が理解できると思います。

text()以外の例

D3 の他のメソッド、attr() や style() を使えばもっと面白いことができるようになります。それぞれ、HTML の属性や CSS のプロパティをセレクションに適用するためのメソッドです。

例として次の一行を加えてみましょう。サンプル画面をご覧ください。

.style("color", "red");

お見事!テキストが赤に変わりました。ここでは sytle() のプロパティの値に定数値( "red" )を与えましたが、ここの値を関数で指定することができます。データの値がある数字を越えたときだけ赤になるように、関数を使って書き換えてみましょう。

.style("color", function(d) {
   if (d > 15) {   // 15 が区切り
      return "red";
   } else {
      return "black";
   }
});

サンプル画面はこう変わりました。最初の三行が黒のままで、d の値が指定した 15 を超えると、文字が赤色に変わります。

次の章では、attr()style() を使って div 要素を操作し、簡単な棒グラフを作ります。いよいよ最初のデータ視覚化です!

次章はDIV 要素の描画

インタラクティブ・データ・ヴィジュアライゼーション このチュートリアルの書籍版の翻訳がオライリー・ジャパンより発売されました。タイトルは『インタラクティブ・データビジュアライゼーション ―D3.jsによるデータの可視化』です(画像をクリックするとアマゾンに飛びます)。

このチュートリアルを大幅に拡充し、3倍近い内容となっています。JavaScriptを中心に基礎編をさらに詳しく解説し(書籍版第3章)、応用編としてモーション、イベント、レイアウト、地図の作成法、データのエクスポート(PDFやSVG等)の章が追加されています(同9章~13章)。アマゾンのページで目次を見ることができます。

本チュートリアルがわかりにくいと感じられた方、あるいは本チュートリアルを終え、さらに応用力を身につけたいと思われた方のどちらにもお勧めの内容となっています。

翻訳はコンピュータ・プログラミング関連書籍を多数翻訳されている長尾高弘氏です。