category

D3.js向けSVG情報

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を利用する用途では、1つのSVGファイル内に多数のcircleやrectを描画することになりますが、各要素ごとに表示・非表示や色変更などの操作が可能です。

HTML同様、各要素にid属性やclass属性を指定可能なため、通常のCSSによる制御と同様の方法で、SVGファイル外からCSSのスタイル定義を適用できます。

また、SVG独特の要素にgというグルーピングのための要素があり、g.some_class rectのような形式でレイヤとして操作できます。

イベントをハンドルしないattribute

SVG内の要素にUIイベントを設定した場合にも、その要素のうえに別の要素があるとイベントが動作しません。

opacity=0を指定して非表示にしている場合でも上の要素が操作イベントを取得してしまいます。

上から重なる要素にpointer-events='none'アトリビュートを指定することで下層の要素のイベントを動作させられます。