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を使えるようになると、データビジュアライゼーションで表現できることが増えていきます。
関連情報
リンク
リンク
リンク