D3.js(v5)で を多角形描くためのSVG（Scalable Vector Graphics）入門です。サンプルで五角形を描いてみます。
目次
HTML/JavaScriptサンプル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 SVG Rect</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 polygon</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("polygon") // 多角形要素追加
.attr("points", "300,50 450,200 400,350 200,350 150,200") // xy座標を複数指定
.attr("fill","#3da4ab") // 円の中の色
.attr("stroke-width", 4) // 線の太さ
.attr("stroke","#0e9aa7"); //線の色
</script>
</body>
</html>
SVG領域の設定
<body>タグにsvgタグを縦幅と横幅を指定して追加します。
SVGで線を描く
四角を描画するにはpolygonタグを使用します。
// SVG領域に多角形を描画
svg.append("polygon") // 多角形要素追加
.attr("points", "300,50 450,200 400,350 200,350 150,200") // xy座標を複数指定
.attr("fill","#3da4ab") // 円の中の色
.attr("stroke-width", 4) // 線の太さ
.attr("stroke","#0e9aa7"); //線の色pointsで最後の始点座標指定なしでも閉じた多角形になります。
| points | x,y座標 (x1,y1 x2,y2…)のようにカンマと半角スペースで指定します。 |
| fill | 長方形の中の色 |
| stroke-width | 線の太さ |
| storke | 線の色 |
まとめ
d3.jsでSVGで多角形を描画する基本についてご紹介でした。
関連情報
リンク
リンク
リンク
