SVGフォーマットの画像は、画像ファイルであると同時にXMLドキュメントでもあり、プログラムで生成することも可能な形式です。
D3.jsはJavascriptのSVG描画ライブラリで、主にグラフデータをもとに座標計算して画像を生成できます。
D3.jsで利用する主なSVG要素には以下のようなものがあります。
- rect
- circle
- text
- line
要素の修飾はアトリビュートがメイン
HTML要素の修飾はおおむねCSSを利用してstyleアトリビュート（属性）に指定しますが、SVGの場合は主な修飾は個別のアトリビュートに指定します。
たとえば、rectの場合は座標をx, y, width, height属性で指定します。
また、色の指定はSVG特有のfill属性に指定します。色の値はCSSと同様のRGB16進カラーコードやキーワードを利用可能です。
D3.jsにはアトリビュート操作関数としてattr()、CSS操作関数としてstyle()が用意されています。
テキストの色指定と配置は独特
SVG内のtext要素の色もCSSのcolorではなく、fill属性で指定します。また背景色は設定できず、別のrect要素を背面に置くことになります。
テキストの配置には、横配置の text-anchorと縦配置の dominant-baseline属性をそれぞれ使う機会があります。
SVG内の要素ごとにCSS制御可能
D3.jsを利用する用途では、１つのSVGファイル内に多数のcircleやrectを描画することになりますが、各要素ごとに表示・非表示や色変更などの操作が可能です。
HTML同様、各要素にid属性やclass属性を指定可能なため、通常のCSSによる制御と同様の方法で、SVGファイル外からCSSのスタイル定義を適用できます。
また、SVG独特の要素に
gというグルーピングのための要素があり、g.some_class rectのような形式でレイヤとして操作できます。
イベントをハンドルしないattribute
SVG内の要素にUIイベントを設定した場合にも、その要素のうえに別の要素があるとイベントが動作しません。
opacity=0を指定して非表示にしている場合でも上の要素が操作イベントを取得してしまいます。
上から重なる要素にpointer-events='none'アトリビュートを指定することで下層の要素のイベントを動作させられます。
SVGの上下関係は描画の前後で決まるため、注意が必要です。
Chuma Takahiro
関連記事
