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

Tutorials > D3 > メソッドのチェイン

メソッドのチェイン

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

D3 は、jQuery でもおなじみのチェイン構文と呼ばれる手法を巧みに取り入れています。メソッドをピリオドで「チェイン」することにより、複数の作業を一行のコードで実行できるようになっています。チェインは手軽に使えますが、その仕組みはしっかりと理解しておく必要があります。さもなければ、いつか何時間ものデバグ作業に頭を抱えるはめになるでしょう。

さて、関数メソッドという二つの用語は、同じ概念を別の言葉で表現したものです。いずれも引数を入力として受け取り、それに処理をほどこし、出力としてデータを返す一連のコードです。

最初に作った D3 のコードを読み返してみましょう(デモページはこちら)。

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

この一行は、特にプログラミング初心者にとってはなんだか面倒くさそうなコードに見えるかもしれません。そこで最初に書いておきますと、JavaScript は HTML と同様、ホワイトスペースや改行を無視します。つまり各メソッドを読みやすく一行ずつに分けて書いても大丈夫なのです。

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

コーディングスタイルは人それぞれです。自分のやり易いようにインデントや改行、ホワイトスペース(タブやスペース)を使いましょう。

一度に一つずつ

この一行をそれぞれのパーツに分解し、一つずつ解説します。

d3 ? D3 オブジェクトへの参照であり、D3 のメソッドにアクセスするためのものです。

.select("body") ? select() に CSS セレクタを与えると、DOM 中でセレクタにマッチする最初の要素の参照を返します(複数の要素にマッチさせたい場合は selectAll() を使います)。ここでは body だけが必要ですので、select() を使い、 body への参照をチェインの次のメソッドに引き渡します。

.append("p") ? append() は引数に指定した任意の要素を新規に生成し、受け渡された任意のセレクションの最後に(ただしその内側に)追加します。ここでは body の内部に新しく p を生成したいので、引数として "p" を与えます。チェイン上流の select() メソッドから body 要素への参照を受け取ったことはメソッド自身が理解しています。最後に append() は、生成したばかりの新しい要素への参照を次のメソッドに受け渡します。

.text("新しいパラグラフ!") ? text() は文字列を受け取り、それを現在のセレクションの開始タグと終了タグの間に挿入します。ここでは前のメソッドから新しい p 要素への参照を受け取っているので、このコードは新しいテキストを <p></p> の間に挿入します(もしそこに既存のテキストがあった場合はそれを上書きします)。

;(セミコロン)? セミコロンは重要です。この行のコードがここで終ることを示しています。

受け渡し

すべてではありませんが、多くの D3 メソッドはセレクション(正確にはセレクションへの参照)を返します。このおかげでメソッドチェインの手法が巧く機能するのです。一般的にはメソッドはその操作したセレクションを返しますが、常にではありません。

よって、次のことを銘記しておきます。「メソッドをチェインするときはその順序が重要である」。メソッドの出力タイプは、チェイン上の次のメソッドが想定する入力タイプと一致している必要があります。隣接するメソッドの入力と出力タイプの不一致は、学校のリレー走でバトンの受け渡しに失敗するようなものです。

ある関数の想定する入力と出力を調べたいときはAPI リファレンスが役に立ちます。セレクションを返すか否か等、各メソッドの詳しい情報が記載されています。

チェインを使わない方法

実は上記のサンプルコードは、チェイン構文を使わなくても書けます。

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

読みにくくなってしまいましたね。しかし実際、チェインを分解する必要に迫られることはあります。例えば、チェインする関数が多くなりすぎて、一行に書くとかえって可読性が落ちる場合です。あるいはコードを整理して組み直したい場合もあるでしょう。

次章はデータのバインディング

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

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

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

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