【D3.js】SVGにテキストを追加する

svg-text

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;
}

text{
  font-weight: bolder;
  font-size: 20px;
  fill:#009900; /* テキストの色 */
  stroke: #007700; /* 枠線の色 */
  stroke-width: 1px;  /* 枠線の太さ */
}

</style>
</head>

<body>
<h1>d3.js SVG Rect</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("text")
    .attr("x", 10)  // x座標
    .attr("y", 30) // y座標
    .attr("dx", "10,10,10,10,10,10,10,10,10,10,10,10,10")  // dx座標
    .attr("dy", "0,4,8,12,16,20,24,28,32,36,40,44,48,52") // dy座標
    .attr("rotate", -30) // テキストの回転角度
    .text("svgにテキストを追加します")  // プレーンテキスト
  </script>
</body>
</html>

SVG領域の設定

<body>タグにsvgタグを縦幅と横幅を指定して追加します。

SVGでテキストを表示する

テキストを表示するにはtextタグを使用します。

  // SVG領域にテキスト要素を追加
  svg.append("text")
    .attr("x", 10) // x座標
    .attr("y", 30) // y座標
    .attr("dx", "10,10,10,10,10,10,10,10,10,10,10,10,10")  // dx座標
    .attr("dy", "0,4,8,12,16,20,24,28,32,36,40,44,48,52") // dy座標
    .attr("rotate", -30) // テキストの回転角度
    .text("svgにテキストを追加します")  // プレーンテキスト

.text(“表示したいプレーンテキスト”)でテキストを追加できますが
以下の属性を指定することができます。

xx座標を指定
yy座標を指定
dxdx座標の指定
本来表示される座標の差分を指定。
通常座標は絶対指定だが、相対座標で指定できる。
dydy座標の指定
rotateテキストの回転角度

テキストのスタイル指定

CSSを使うことでテキストのスタイル設定をすることができます。

text{
  font-weight: bolder;
  font-size: 20px;
  fill:#009900; /* テキストの色 */
  stroke: #007700; /* 枠線の色 */
  stroke-width: 1px;  /* 枠線の太さ */
}

まとめ

d3.jsでSVGでテキストを表示する基本についてご紹介でした。

複数オブジェクトになると、スタイル管理はクラスを分けた方が管理しやすいので、その方法も今後ご紹介してきます。

関連情報

タグ:

コメントを残す

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

CAPTCHA