More than 1 year has passed since last update.

d3.jsとSVG

d3.jsは、javascriptからデータを基にSVGを描画するライブラリである。Data-Driven Documents(データ駆動型ドキュメント)のDをとって、d3と命名されている。ライセンスは修正BSD。

SVG(Scalable Vector Graphics)とは、W3Cが標準化したタグ形式で画像を表現する規格で、HTML等で利用することができる。SVGの特徴として、ベクタ形式であるという点があり、ベクタ形式の画像は、拡大、縮小をしたときに劣化が起こりにくいという利点がある。

d3.jsがsvgタグと同じことができる例として、日本国旗を描くサンプルをsvgタグとd3.jsで作成した。どちらも結果は同じになる。

サンプル1

サンプル2

d3.jsはグラフを描画する用途で利用されることが多い。以下に公式のサンプルが掲載されている。

が、多くの手順を要し、棒グラフの四角形を描く、軸を描くなど、すべて自分でプログラムを作成する必要がある。データとオプションを引数とした関数を提供し、それを呼び出すだけでグラフを描画してくれるライブラリもあるが、d3.jsには、そういった機能はない。学習コストは高いが、使いこなせば、自分の好きなようにグラフを作成することができる。また、d3.jsを簡単に扱えるようにする、d3.jsのラッパーライブラリも多く存在する。

有用なリンク

有用そうな書籍

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.