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 width = 600; // グラフの幅
var height = 400; // グラフの高さ
// SVG設定
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// SVG領域に線を描画
svg.append("line")
.attr("x1",100)
.attr("x2",500)
.attr("y1",100)
.attr("y2",300)
.attr("stroke-width",4)
.attr("stroke","#0e9aa7");
</script>
</body>
</html>
SVG領域の設定
<body>タグにsvgタグを縦幅と横幅を指定して追加します。
SVGで線を描く
円を描画するにはcircleタグを使用します。
// SVG領域に線を描画
svg.append("line")
.attr("x1",100) // x座標の始点
.attr("x2",500) // x座標の終点
.attr("y1",100) // y座標の始点
.attr("y2",300) // y座標の終点
.attr("stroke-width",4) // 線の太さ
.attr("stroke","#0e9aa7"); // 線の色| x1 | x座標の始点 |
| x2 | x座標の終点 |
| y1 | y座標の始点 |
| y2 | y座標の終点 |
| stroke-width | 線の太さ |
| storke | 線の色 |
まとめ
d3.jsでSVGで線を描画する基本についてご紹介でした。
関連情報
リンク
リンク
リンク
