【d3.js / v5】SVGで直線を描く基本

svg-line

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"); // 線の色
x1x座標の始点
x2x座標の終点
y1y座標の始点
y2y座標の終点
stroke-width線の太さ
storke線の色

まとめ

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

関連情報

タグ:

コメントを残す

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

CAPTCHA