【D3.js】SVGで多角形 (Polygon)を描く基本

Polygon

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で最後の始点座標指定なしでも閉じた多角形になります。

pointsx,y座標
(x1,y1 x2,y2…)のようにカンマと半角スペースで指定します。
fill長方形の中の色
stroke-width線の太さ
storke線の色

まとめ

d3.jsでSVGで多角形を描画する基本についてご紹介でした。

関連情報

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA