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

2018-02-192022-10-03

チュートリアル目次

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <svg width="500" height="50">
    </svg>
    <script>
      // ここにコードを書いていきます。
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</svg>

// ここにコードを書いていきます。

</script>

</body>

</html>

D3を使って

d3.select("body").append("svg").attr("width", 500).attr("height", 50);

1	d3.select("body").append("svg").attr("width", 500).attr("height", 50);

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

SVGの形状

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

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

<rect></rect>

1	<rect></rect>

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

<rect/>

<rect/>

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

rect

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

<rect x="0" y="0" width="500" height="50"/>

1	<rect x="0" y="0" width="500" height="50"/>

circle

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

<circle cx="250" cy="25" r="25"/>

1	<circle cx="250" cy="25" r="25"/>

line

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

<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>

1	<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>

text

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

<text x="250" y="25">Text</text>

1	<text x="250" y="25">Text</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のみ。フォントの大きさ。

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

<circle cx="25" cy="25" r="22"
 fill="yellow" stroke="orange" stroke-width="5"/>

1 2	<circle cx="25" cy="25" r="22" fill="yellow" stroke="orange" stroke-width="5"/>

描画順について

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

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

<rect x="0" y="0" width="30" height="30" fill="purple"/>
<rect x="20" y="5" width="30" height="30" fill="blue"/>
<rect x="40" y="10" width="30" height="30" fill="green"/>
<rect x="60" y="15" width="30" height="30" fill="yellow"/>
<rect x="80" y="20" width="30" height="30" fill="red"/>

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

透明度について

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

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

<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 1.0)"/>
<circle cx="50" cy="25" r="20" fill="rgba(0, 0, 255, 0.75)"/>
<circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.5)"/>
<circle cx="100" cy="25" r="20" fill="rgba(255, 255, 0, 0.25)"/>
<circle cx="125" cy="25" r="20" fill="rgba(255, 0, 0, 0.1)"/>

D3によるSVGの描画

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <svg width="500" height="50">
    </svg>
    <script>
      // ここにコードを書いていきます。
      var svg = d3.select("body").append("svg").attr("width", 500).attr("height", 100);
      var dataset = [1, 2, 3, 4, 5];
      var circles = svg.selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle");
      circles.attr("cx", function(d, i) {
        return (i * 50) + 25;
      })
      .attr("cy", 50)
      .attr("r", function(d) {
        return 5*d;
      })
      .attr("fill", "yellow")
      .attr("stroke", "orange")
      .attr("stroke-width", function(d) {
        return d;
      });
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</svg>

// ここにコードを書いていきます。

var svg = d3.select("body").append("svg").attr("width", 500).attr("height", 100);

var dataset = [1, 2, 3, 4, 5];

var circles = svg.selectAll("circle")

.data(dataset)

.enter()

.append("circle");

circles.attr("cx", function(d, i) {

return (i * 50) + 25;

})

.attr("cy", 50)

.attr("r", function(d) {

return 5*d;

})

.attr("fill", "yellow")

.attr("stroke", "orange")

.attr("stroke-width", function(d) {

return d;

});