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

Tutorials > D3 > 要素の追加

要素の追加

最終更新日 2013年1月1日(原文)  2013年03月21日(翻訳 / h.sakai

最初にしなければならないことの一つは、D3 を使って新しい DOM 要素を生成することです。データ視覚化レンダリングの場合、一般的には生成する要素は SVG オブジェクトになりますが、ここでは分かりやすさ優先で、まずはパラグラフ要素 p を生成してみましょう

以下の簡単な HTML テンプレートを用います。

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="utf-8">
      <title>D3 Test</title>
      <script type="text/javascript" src="d3/d3.v3.js"></script>
   </head>
   <body>
      <script type="text/javascript">
         // ここに D3 スクリプトを書きます。
      </script>
   </body>
</html>

保存してブラウザから開いてみましょう。デモページはこのようになります。ページには何も表示されていませんね?しかし WEBインスペクタで見ると次のような画面が表示されます。

Web inspector

HTML に戻り、script タグ中のコメントを次の行に書き換えます。

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

保存して再表示させます(デモページはこちら)。どうでしょう?ブランクだったページにテキストが表示されましたね。WEB インスペクタ画面は次のように変わります。

Web inspector

違いが分かるでしょうか。変更後のページには、DOM の中に実行時に生成された新しいパラグラフ要素が追加されています。大した違いには見えないかもしれません。しかしこのテクニックを使えば、データセットに対応した数十、数百の要素を動的に生成できるようになります。

今起こったことを順番に見ていきましょう。

  1. D3 の select メソッドを呼び出します。このメソッドは、CSS セレクタ構文を使って DOM の中から要素を一つ選択します(ここでは body を選択しました)。
  2. 新しく p 要素を生成し、現在のセレクション(選択要素)の最後に追加します。今回の場合、終了タグ </body>直前になります。
  3. 空のパラグラフ要素のテキストに「新しいパラグラフ!」をセットします。

間に挟まれた意味不明のドット( . )は、D3 のチェイン構文です。

次章はメソッドのチェイン

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

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

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

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