最近D3.jsをかなりいじってみました。APIをあれこれ調べ、すこし複雑なチャートを構築した後、長い間D3を誤解していたことに気づきました。それは私だけではありません。友達と話してみると、彼らもD3について勘違いをしています。そこで、よくある誤解のいくつかをはっきりとさせるために、この記事を書く事にしました。

D3はチャート・ライブラリではありません

D3のホームページに行くと、たくさんの素晴らしいチャートとビジュアライゼーションを見ることができます。しかし、D3は、 Highcharts や Chart.js あるいは Google Charts のようなチャート・ライブラリではありません。ただ単に、データセットを受け渡すことや、必要なチャートのタイプ指定、凝ったチャートを入手することはできません。D3はそれよりもずっと低レベルなのです。D3上に構築されたチャート・ライブラリでは、たとえば nvd3 、 Rickshaw などがあります。

D3はグラフィック・レイヤーではありません

D3はグラフィック・レイヤーではありません。実際、D3のグラフィック・パワーの大部分はSVGに由来します。D3は本質的に、SVG (あるいは、HTMLでさえ。というのは、これらは全てXMLに基づいたマークアップ言語であるため) を処理するための、データ・フレンドリーなAPIを提供するのであって、グラフィック自体を「描く」のではありません。つまり、描写という困難な仕事を成し遂げるのはSVGなのです。

D3はSVGのポリフィルではありません

SVGをサポートしていないブラウザに、SVGのためのポリフィルを提供する Raphaël とは異なり、D3は抽出レイヤーを使わず、SVGを直接処理します。D3を正しく動かすためには、ブラウザがSVGをサポートしている必要があります。

D3はCanvasやWebGLを（ほとんど）サポートしていません

D3のAPI ( d3.geo.path() のような) には、SVGとCanvasの両方で動くものがありますが、D3のAPIの大部分は、SVGのためにデザインされています。Canvasのライブラリーを探しているのなら、 Paper.js や、 Fabric.js 、そして EaselJS を見てみて下さい。 Three.js は、WebGLのためのなかなかいいライブラリです。

D3はAngularJSと一緒に動くようにはデザインされていません

AngularJSには、独自のDOM処理API (データ・バインド) がありますが、D3もそうです。この2つを一緒に動かすには、そのどちらかがDOMをコントロールする必要があります。AngularJSをディレクティブに用いてDOMをD3に受け渡し、魔法を使ってもらうか、あるいは、D3のデータ変換APIを使い、AngularJSにDOMを処理してもらうかのいずれかが可能です。しかしながら、どちらのやり方を用いても、両者のフレームワークAPIの大半は使わずに終わります。

でも、D3は最高です

D3をしばらくいじった後、私はD3を データ・ビジュアライゼーション ツールとして定義するつもりでした。D3のAPIが2つの部分、すなわち データ と ビジュアライゼーション を持つという意味においてです。D3はデータ (配列、時系列、ジオデータ) を処理するのに便利なユーティリティーをたくさん備えていて、それ自体かなり役に立ちます。D3のパワフルなビジュアライゼーションAPIは、データだけでなく、文書に変換してバインドすることを容易にします。

D3を学ぶことはそれほど簡単ではありません。なので、はじめる場合は適切な期待を持つことが重要です。また、早い時期に実際にあれこれやってみて、地道に努力して下さい。