データを使う前に、ここでは単純にSVG要素を表示していきます。
前回作ったsvgタグまでのテンプレートを用意
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 700;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
</script>
</body>
</html>
上のコードを見るとd3、select()、append()、attr()がドット（.）でつながっています。これをメソッドチェーンといいます。ドットでメソッドをつなげていくことで、設定を付け加えていく形がD3の基本です。ドットは改行しても大丈夫なので、見やすくするためにわかりやすい区切りで改行していくと便利です。
この場合はd3のselect()を使ってbody要素を選び、append()でその中にsvg要素を追加、さらにattr()で属性値を指定しています。
- d3.select = DOM要素選択
- append = svg要素追加
- attr = svg属性追加
その結果、下のようにhtmlのbodyの中にsvgができます。
svgに円を追加
svgはキャンバスのような枠組みで、追加しても何も表示されません。svgの中に円などのグラフィック要素を追加すると、それが表示されるようになります。
上のコードでは、var svgという変数に格納していることに注目してください。格納した後に変数を使うと、いつでもvar svg ~.append(“height”,height)の下にメソッドチェーンを追加したのと同じ扱いになります。
では、下のように変数svgから初めて、メソッドチェーンでcircle要素を追加します。
svg.append("circle")
.attr("cx",50)
.attr("cy",50)
.attr("r",20)
.attr("fill","green")
.attr("stroke-width",3)
.attr("stroke","orange");
解説：
svgから始めることで、var svgの続きからメソッドチェーンが始まります。
append(“circle”)でcircle要素をsvgに追加した後、attr()で属性を指定しています。
circleに必要な属性は、以下の４つです。
- cx = 円の中心のx座標
- cy = 円の中心のy座標
- r = 円の半径
- fill = 円の内側を塗りつぶす色
今回はさらに円の枠線についての属性も追加しています。
- stroke-width = 枠線の太さ
- stroke = 枠線の色
これをブラウザで表示するとこうなります。
長方形要素の追加
同じ要領で長方形を追加します。
svg.append("rect")
.attr("x",100)
.attr("y",70)
.attr("width",50)
.attr("height",30)
.attr("fill","red");
解説：
これも変数svgから始めています。append(“rect”)で長方形要素を追加しています。
- x = 長方形の左上端のx座標
- y = 長方形の左上端のy座標
- width = 長方形の横幅
- height = 長方形の縦幅
- fill = 長方形内の塗りつぶし色
長方形
ラインの追加
svg.append("line")
.attr("x1",150)
.attr("x2",200)
.attr("y1",50)
.attr("y2",100)
.attr("stroke-width",4)
.attr("stroke","black");
解説：
append(“line”)でライン要素を追加しています。
- x1 = ライン始点のx座標
- x2 = ライン終点のx座標
- y1 = ライン始点のy座標
- y2 = ライン終点のy座標
- stroke-width = ラインの太さ
- stroke = ラインの色
実際のHTMLファイル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 700;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("circle")
.attr("cx",50)
.attr("cy",50)
.attr("r",20)
.attr("fill","green")
.attr("stroke-width",3)
.attr("stroke","orange");
svg.append("rect")
.attr("x",100)
.attr("y",70)
.attr("width",50)
.attr("height",30)
.attr("fill","red");
svg.append("line")
.attr("x1",150)
.attr("x2",200)
.attr("y1",50)
.attr("y2",100)
.attr("stroke-width",4)
.attr("stroke","blue");
</script>
</body>
</html>
htmlファイルはここにアップロードしています（リンク）。
また、SVGならほぼなんでも追加でき、属性も指定できるので、ウェブサイトで調べていろいろなカスタマイズができます：
SVG 要素リファレンス – SVG リダイレクト 1 | MDN