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

Tutorials > D3 > DIV要素の描画

DIV要素の描画

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

本章では、いよいよデータを使った描画に取り掛かります。

作業には、引き続き前章と同じシンプルなデータセットを使います。

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

これから作るのはごく単純な棒グラフです。棒グラフとはつまるところ長方形のことです。そして長方形を描くのに一番簡単なのは HTML の <div> 要素を使うことです( 実は WEB ブラウザにとってはすべての要素が長方形です。従ってここにあげる例は span 要素等の任意の要素に簡単に当てはめることができます)。

データ表示用の棒としては、こんな感じの div で良いでしょう

<div style="display: inline-block;
   width: 20px;
   height: 75px;
   background-color: teal;"></div>

( WEB 標準の考え方から言うと、これはセマンティック的に好ましい DIV 要素の使い方ではありません。通常、単に視覚効果の目的のために空の div を使うべきではない、とされているからです。ただし例外もあります。たとえば、チュートリアル教材として使う場合です(笑))

div.bar {
   display: inline-block;
   width: 20px;
   height: 75px;   /* この数値は実行時に上書きされます */
   background-color: teal;
}

この新しい CSS ルールを適用するためには、各 divbar クラスを割り当てる必要があります。手作業で HTML を書く場合には次のようなコードになります。

<div class="bar"></div>

D3 を使って要素にクラスを追加するには selection.attr()を用います。ここで、attr() と その近縁メソッドである sytle() の違いをしっかりと理解しておく必要があります。

属性の設定

attr() は、要素の HTML 属性とその値を設定するために用います。HTML 属性とは、要素の <>カッコ内に含めることのできる任意のプロパティと値の組み合わせのことです。次の例を見てください。

<p class="caption">
   <select id="country">
   <img src="logo.png" width="100px" alt="Logo" />

この HTML の 3つの要素には合計 5 つの属性(と対応する値)が使われています。いずれの属性も attr() を使って設定することができます。

class   |   caption
id      |   country
src     |   logo.png
width   |   100px
alt     |   Logo

目的の div 要素に bar クラスを設定するには、

.attr("class", "bar") (※)

とします。

クラスについての註釈

まず、要素のクラス は HTML の属性として記録されます。次に、そのクラスが CSS のスタイルルールを参照するのに使われます。ここで混乱してしまう人がいるかもしれません。クラスを設定すること(そしてそのクラス経由でスタイルが参照されること)と、要素に直接スタイルを設定することの違いは何なのでしょうか?D3 ではどちらでも設定可能です。自分にとって都合の良い方法を選んで構わないのですが、ここでお薦めするのは以下の方法です。複数の要素で共有されるプロパティについてはクラスを用い、その標準から外れるプロパティについてのみスタイルを設定する方法です(まさに上の例で使った方法です)。

ここで D3 のもう一つのメソッドについて軽く触れておきましょう。classed() メソッドを使うと、(複数の)要素に簡単にクラスを追加したり削除することができます。(※) の行は次のようにも書けます。

.classed("bar", true)

再び棒の描画について

ここまでに得た知識を使って D3 のコードを書いてみましょう。

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

d3.select("body").selectAll("div")
   .data(dataset)
   .enter()
   .append("div")
   .attr("class", "bar");

Five divs masquerading as one

このコードのサンプル画面をご覧ください。 ソースコードを見、WEB インスペクタを開いてページに起こっていることを確認してください。横長の一つの長方形に見える図形は、実はデータセットの各要素に対応した 5 つの縦長の棒が、隙間無く並んだものです。

スタイルの設定

style() メソッドは、CSS のプロパティと値を直接 HTML 要素に設定するために用いられます。これは、style 属性を用いて、次のように直接 HTML 内に CSS ルールを設定するのと同じことです。

<div style="height: 75px;"></div>

棒グラフでは、棒の高さが対応するデータと相関していなければなりません。よって D3 のコードの最後に次の一行を加えます。

.style("height", function(d) {
   return d + "px";
});

A small bar chart!

ではサンプル画面をご覧ください。 小さいながら棒グラフが表示されました!

D3 がデータポイントをループするたびに、d の値には対応するデータポイントがセットされます。そのため height プロパティの値には、d (現在のデータの値)と px (単位がピクセルであることを示す文字列)を結合したものが設定されます。結果としてそれぞれの棒の高さは 5px、10px、15px、20px、25px となるのです。

さて、このままでは見栄えが今一つです。もう少し背を高くしてみましょう。

.style("height", function(d) {
   var barHeight = d * 5;  // 高さを 5 倍にします
   return barHeight + "px";
});

また、棒の間隔を空けるためにスペースも追加します。

margin-right: 2px;

The final bar chart

完成です!SIGGRAPH (※) にも持ち込める出来栄えとなりました。
(※)SIGGRAPH:アメリカのコンピュータグラッフィックスに関する権威ある会議・学会のこと。

完成したデモ画面を見てみましょう。 再びソースを見、WEB インスペクタを開いて元の HTML と最終的な DOM を比較してみましょう。

次章はdata() の力

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

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

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

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