D3.js SVGの使い方 - rect, circle, line, text
概要
D3.jsはHTML要素を使用して表示できるが、SVGを使用するとブラウザやデバイスの違いに影響されにくく、より高速に応答するサイトを作成できる。
SVG（Scalable Vector Graphics）
- Web用のベクターグラフィック。HTML文書に直接含めたり挿入したりできる。
- Internet Explorer 8以下を除くすべてのブラウザでサポートされている。
- コードで画像を編集できる。
- 品質を損なわずに拡大・縮小できる。
簡単なSVGの使い方
ここでは簡単なSVGの使い方を説明する。
SVGを表示するには、まずSVG要素を描画する領域を作成する必要がある。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<svg width="500" height="50">
</svg>
<script>
// ここにコードを記述する。
</script>
</body>
</html>
D3を使用して次のように記述してもよい。
d3.select("body").append("svg").attr("width", 500).attr("height", 50);
ここでは幅と高さを設定することが重要である。設定しない場合、可能な限り大きな領域が設定される。
SVG図形
SVG要素内に設定できる代表的な図形を見ていく。rect、circle、ellipse、line、text、pathなど、さまざまなものがある。
座標は画面左上が原点(0, 0)となり、右へ進むほどx座標が増え、下へ進むほどy座標が増える。
<svg width="500" height="70">
width: 横の長さheight: 縦の長さ
また、タグの終わりを/>で閉じることが重要である。
<rect></rect>
上のように書いてもよいが、Text以外のSVG要素は単独で使うことが多いため、次のように後ろのタグを省略できる。
<rect/>
rect
rectは四角形を描画する要素である。x、y座標および幅、高さを設定する。
<rect x="10" y="10" width="500" height="50" rx="10" ry="10"/>
x: 四角形の横方向の開始点y: 四角形の縦方向の開始点width: 横の長さheight: 縦の長さrx: 横方向の角丸の度合いry: 縦方向の角丸の度合い
circle
circleは円を描画する要素である。x、y座標および半径を設定する。
<circle cx="250" cy="25" r="25"/>
line
lineは線を描画する要素である。始点座標、終点座標、および色を設定する。色を設定しない場合は透明になる。
<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>
text
textは文字列を描画する要素である。座標を設定し、タグ内に表示するテキストを記述する。
<text x="250" y="25">Text</text>
矢印
次の例は、線の終端に図形を付けて矢印線を表現したコードである。
<svg>
<defs>
<marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5"
markerWidth="6" markerHeight="6" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<polyline points="10,10 200,50" fill="none" stroke="black" stroke-width="2" marker-end="url(#Triangle)" />
</svg>
コードを見ると、SVGの機能のうちmarker定義を利用している。図形をあらかじめ定義して再利用する方式である。
markerのorientをautoに指定すると線の傾きに合わせて自動的に回転でき、回転時の原点を指定するためにrefXとrefYの値を使用する。
SVG要素のスタイル
SVGで設定できる代表的なスタイル（属性）は次のとおりである。
| 属性 | 説明 |
|---|---|
fill |
塗りつぶしの色値。CSSと同じように次の4種類で指定できる。
|
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"/>
描画順序
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.v7.min.js"></script>
</head>
<body>
<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>
属性は1つずつattrで指定する必要がある。v3まではオブジェクトで設定できたが、v4以降はできない。