のんびりしているエンジニアの日記

ソフトウェアなどのエンジニア的な何かを書きます。

d3.jsを使ってみる(4) SVGを利用して図形を描画する

Sponsored Links

皆さんこんにちは
お元気ですか。私はのんびりしています。

さて、遂にd3.jsを使って今回は図形を書いてみます。
なんかやっとそれっぽい感が出てきているような出てきていないような…。何やらSVGと呼ばれるものを利用するそうです。
そもそもSVGとは何なのか・・・

SVGとは?

Scalable Vector Graphicsの略です。
XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。

ベクター画像は画像を点の集合体ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。

SVGとは 【 Scalable Vector Graphics 】 - 意味/解説/説明/定義 : IT用語辞典より

まぁ色々定義しているXMLのファイルから形式化したものか!?

図形を描写する

手順としては2つです。

  1. 領域を描写する
  2. 図形を描く

要は、紙用意して図形描くのと同じです。

例題

<head>
<meta charset = "utf-8">
</head>
<body>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		datasets = [30,40,50,60,80];
		var svg = d3.select("body").append("svg").attr({width:500,height:800});

		svg.selectAll("circle")
			.data(datasets)
			.enter()
			.append("circle")
			.attr({
				cx:function(d){return d},
				cy:function(d){return d},
				r:10,
				fill:"blue"
			});
	</script>
</body>

f:id:tereka:20140814162614p:plain

まず、領域の生成ですが、
var svg = d3.select("body").append("svg").attr({width:500,height:800});

attrで範囲を指定しています。

次の描画ですが、
今回は円を描くので、タグはcircleです。データセットに比べて要素数不足しているのでenter()そしてattrで細かいことを指定しています。
cx:横、cy:縦、r:半径、fill:色です。

因みにほかはどう描くのかといいますと

四角形

<script type="text/javascript">
datasets = [50,150,250,350,450];
var svg = d3.select("body").append("svg").attr({width:500,height:800});

svg.selectAll("rect")
	.data(datasets)
	.enter()
	.append("rect")
	.attr({
		x:function(d){return d},
		y:function(d){return 100},
		width:50,
		height:50,
		fill:"red"
	});
</script>

f:id:tereka:20140814163434p:plain

<script type="text/javascript">
svg.selectAll("line")
	.data(datasets)
	.enter()
	.append("line")
	.attr({
		x1:function(d){return d},
		y1:function(d){return 5},
		x2:function(d){return d},
		y2:function(d){return 100},
		"stroke-width":2,
		"stroke":"black"
	});
</script>

f:id:tereka:20140814163956p:plain