D3.js v4/v5 入門④ – SVGの使い方

2018-02-19

チュートリアル目次

  1. 環境準備
  2. 要素の追加方法
  3. データのバインド方法
  4. SVGの基礎
  5. グラフの書き方

D3.jsは、HTMLの要素を使って表示を作っていくこともできますが、SVGを使用するとブラウザやデバイスの違いによる影響を受けず、よりレスポンスの早いサイトを作ることができます。

このチュートリアルでは簡単なSVGの使い方を説明します。

SVGを表示するためには、始めにSVG要素を描画する領域作成する必要があります。

D3を使って

としてもかまいません。幅と高さを設定するのは重要です。設定がなければできるだけ大きな領域が設定されます。

SVGの形状

SVG要素内に設定できる代表的な形状を見てきます。rect、circle、ellipse、line、text、pathなど様々なものがあります。座標は画面左上が原点(0,0)となり、右に進むほどx座標が増加し、下に進むほどy座標が増加します。

 

また、タグの最後を/>で閉じることが重要です。

としてもよいですが、Text以外のSVG要素は単独で用いることが多く、

とすれば後ろのタグを省略できます。

rect

 四角形を描画する要素です。x,y座標および、幅、高さを設定します。

 

circle

 丸を描画する要素です。x,y座標および、半径を設定します。

 

line

 線を描画する要素です。始点座標と終点座標および、色を設定します。色を設定しないと透明になります。

 

text

 文字列を描画する要素です。座標を設定します。タグ内に表示するテキストを記載します。

 

SVG要素のスタイル設定

SVGで設定できる代表的なスタイル(属性)は次の通りです。

fill 塗りつぶしのカラー値です。CSSと同様に次の4種類で指定できます。

  • 色名 – 例:”orange”
  • 12進数 – 例:#3388aa
  • RGB – 例: rgb(10, 150, 20)
  • RGB+α – 例:rgba(10, 150, 20, 0.5)
stroke 枠線のカラー値
stroke-width 枠線の太さ。数値。
opacity 透明度。0.0~1.0の値。
font-family textのみ。フォント。
font-size textのみ。フォントの大きさ。

これらを使って、次のように装飾することができます。

 

描画順について

SVGはCSSのz-indexのような概念がなく、後に設定されたものが上書きされる形で表示されます。

例えば、次のような重なったSVGを描画すると

 

このようになります。重要なものを後に記載するなど注意が必要です。

透明度について

重なった要素の両方を表示したい場合は透明度の設定ができます。全体の透明度を設定したい場合はopacity、枠線と、塗りつぶしの双方を別々の透明度に変えたいときなどはrgbaを使います。

次の例は、透明度を色々変えて描画した例です。

 

D3によるSVGの描画

D3を用いてSVG要素を追加するには、以下のようにします。

 

属性を一つずつattrで指定する必要があります。(v3まではオブジェクトで設定できましたがv4では不可です)

次のページで簡単なグラフを作成します。

 

チュートリアル目次

  1. 環境準備
  2. 要素の追加方法
  3. データのバインド方法
  4. SVGの基礎
  5. グラフの書き方