3d.js(v5)で図形を描くためのSVG（Scalable Vector Graphics）入門です。サンプルで円を描いてみます。
目次
SVG（Scalable Vector Graphics）とは？
XMLベースの、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。
Wikipediaより引用
HTML/JavaScriptサンプル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 SVG</title>
<script src="d3.min.js"></script>
<style>
h1{
font-size: small;
font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}
svg{
font: 12px sans-serif;
background-color: #eee;
text-align: right;
padding: 3px;
margin: 1px;
color: #333;
}
</style>
</head>
<body>
<h1>d3.js SVG</h1>
<script>
// SVG設定
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// SVG領域に円の追加
svg.append("circle") // "circle"要素をsvg領域に追加
.attr("cx",300) // 円の中心のx座標
.attr("cy",200) // 円の中心のy座標
.attr("r",100) // 円の半径
.attr("fill","#3da4ab") //円の中の色
.attr("stroke-width",4) // 円の枠の太さ
.attr("stroke","#0e9aa7"); // 円の枠の色
</script>
</body>
</html>
SVG領域の設定
<body>タグにsvgタグを縦幅と横幅を指定して追加します。
// SVG領域の設定
var width = 600; // グラフの幅
var height = 400; // グラフの高さ
// SVG設定
var svg = d3.select("body") // bodyタグを選択
.append("svg") // svg要素を追加
.attr("width", width) // width属性を追加
.attr("height", height); // height属性を追加d3はチェーンと呼ばれる手法で、メソッド(関数)をピリオド(.)でつなぐことで一行のコードで複数のアクションを実行します。
| select() | セレクタ select（単一）, selectAll（複数）でタグを選択 |
| select.append() | 指定した要素を生成し、参照先の最後に追加 |
| select.attr() | 属性を取得、または変更 |
SVGで円を描く
円を描画するにはcircleタグを使用します。
// SVG領域に円の追加
svg.append("circle") // "circle"要素をsvg領域に追加
.attr("cx",300) // 円の中心のx座標
.attr("cy",200) // 円の中心のy座標
.attr("r",100) // 円の半径
.attr("fill","#3da4ab") //円の中の色
.attr("stroke-width",4) // 円の枠の太さ
.attr("stroke","#0e9aa7"); // 円の枠の色| cx | 円の中心x座標 |
| cy | 円の中心y座標 |
| r | 円の半径 |
| fill | 円の塗りつぶし色 |
| stroke-width | 円の枠の太さ |
| storke | 円の枠の色 |
まとめ
d3の基本となる、セレクタ、チェーン、SVGの円の描画についてご紹介しました。
d3は、jQuery（JavaScriptライブラリ)に影響を受けているので、タグの扱いやSVGを使えるようになると、データビジュアライゼーションで表現できることが増えていきます。
関連情報
リンク
リンク
リンク
