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

svg-circle

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

関連情報

タグ:

コメントを残す

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

CAPTCHA