D3.js入門 – 「データ・ドリブン」という特徴について

116件のシェア(ちょっぴり話題の記事)

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

D3.jsについて調べ始めた、t-hondaです。

前回はいきなりD3.jsとRuby on Railsを組み合わせてグラフを表示してみましたが
今回はD3.jsの入門編として、特徴と、簡単なソースの書き方について
サンプルを挙げて書いていきたいと思います。

D3.jsの特徴

以下の弊社のブログ(※1)でも取り上げられていますが、D3.jsは
「データ・ドリブン・ドキュメント」 の略であり
「データに基づいてドキュメントを操作するための JavaScript ライブラリ」 であると定義されています。

D3.js - 日本語ドキュメントより(太字は著者追記)


この「データ・ドリブン」であり、「データに基づいてドキュメントを操作する」という特徴について
以下のサンプルで解説していきたいと思います。

※1 弊社ブログ
[HTML5] D3を利用してデータを可視化してビジネスに活かす
D3.jsで始めるData-Drivenなページ作成

サンプルソース

index.html

<!DOCTYPE html>
<html lang="ja-JP">
    <head>
        <meta charset="utf-8">
        <title>D3 p tag sample</title>
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            var ary = [10, 20, 30, 40, 50];
            
            d3.select("body").selectAll("p")
                    .data(ary)
                    .enter()
                    .append("p")
                    .text(function(d) {return d});
        </script>
    </body>
</html>

D3.jsを使い、配列で宣言されたデータをpタグで表示する、簡単なサンプルです。
ソースを解説すると、以下のようになります。


<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

D3.jsのライブラリを参照します。

var ary = [10, 20, 30, 40, 50];

表示するデータを配列で宣言します。

d3.select("body").selectAll("p")
        .data(ary)
        .enter()
        .append("p")
        .text(function(d) {return d});

D3.jsが「ドキュメントを操作」している部分です。
D3.jsの書式の特徴として、メソッドチェーンでメソッドを繋げていくことで
ドキュメント(今回はHTML)を作成していくことが挙げられます。

一つずつメソッドを見ていくと、以下のようになります。

・d3.select("body")
  D3のselect()メソッドを呼び出し、HTML内のbodyタグを選択します。

・selectAll("p")
  HTML内のpタグを全て選択します。
  但しこの時点ではpタグは存在しないため、空の要素が返されます。
  この空の要素は、作成予定のHTMLタグだと考えてください。

・data(ary)
  10行目で宣言したデータを、作成予定のpタグにバインドします。
  バインドすることで、以降の処理がデータの数だけループして実行されます。

・enter()
  バインドされたデータを表示するための要素を作成するため、enter()メソッドを呼び出します。
  但しこの時点では、要素の具体的なタグは指定していません。

・append("p")
  上記のenter()が作成した要素に、pタグを設定します。

・text(・・・)
  上記で作成したpタグ内に、()内で指定した文字を埋め込みます。
  今回は()内に記述されている無名関数が返す値が、そのまま表示されます。

・function(d) {return d}
  上記data(ary) でバインドしたデータは配列でした。
  この配列の要素が一つずつ、引数dに渡されてきます。
  今回は return d で、配列の要素をそのまま返却しているので
  配列内の値がそのまま表示されることになります。

ソースをブラウザで実行すると、以下のように表示されます。

p-tag-1

この表示のHTMLソースは以下のようになります。

p-tag-2

このように、ソースの10行目で定義した配列のデータが
HTML内のpタグとして全て表示されています。

「データに基づいてドキュメントを操作」してみる

では、先のソースのデータを変更してみたいと思います。

var ary = ["alpha", "beta", "gamma", "delta"];

ソースをブラウザで実行すると、以下のように表示されます。

p-tag-3

この表示のHTMLソースは以下のようになります。

p-tag-4

HTML内のpタグが、変更した値に書き換えられていることが分かるかと思います。

このように、D3.jsは「データに基づい」て、「ドキュメント」(今回はHTML)を
「操作」していることが分かりました。

まとめ

今回はグラフの表示等、見栄えが良い(?)サンプルではなく
簡単なpタグを表示するサンプルを使ってみました。

D3.jsはグラフや地図などを表示するだけのライブラリなのではなく
もっと広義のドキュメント(今回はHTMLのpタグ)をデータに基づいて操作しています。

この データが視覚化を制御

D3 チュートリアル - data() の力より

をしている「データ・ドリブン」という特徴を、D3.jsが持つことを実感して頂ければ幸いです。