POSTD PRODUCED BY NIJIBOX

POSTD PRODUCED BY NIJIBOX

ニジボックスが運営する
エンジニアに向けた
キュレーションメディア

POSTD PRODUCED BY NIJIBOX

POSTD PRODUCED BY NIJIBOX

ニジボックスが運営する
エンジニアに向けた
キュレーションメディア

FeedlyRSSTwitterFacebook
Ruoyu Sun

本記事は、原著者の許諾のもとに翻訳・掲載しております。

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

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

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

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

監修者
監修者_古川陽介
古川陽介
株式会社リクルート プロダクト統括本部 プロダクト開発統括室 グループマネジャー 株式会社ニジボックス デベロップメント室 室長 Node.js 日本ユーザーグループ代表
複合機メーカー、ゲーム会社を経て、2016年に株式会社リクルートテクノロジーズ(現リクルート)入社。 現在はAPソリューショングループのマネジャーとしてアプリ基盤の改善や運用、各種開発支援ツールの開発、またテックリードとしてエンジニアチームの支援や育成までを担う。 2019年より株式会社ニジボックスを兼務し、室長としてエンジニア育成基盤の設計、技術指南も遂行。 Node.js 日本ユーザーグループの代表を務め、Node学園祭などを主宰。