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(“表示したいプレーンテキスト”)でテキストを追加できますが
以下の属性を指定することができます。
| x | x座標を指定 |
| y | y座標を指定 |
| dx | dx座標の指定 本来表示される座標の差分を指定。 通常座標は絶対指定だが、相対座標で指定できる。 |
| dy | dy座標の指定 |
| rotate | テキストの回転角度 |
テキストのスタイル指定
CSSを使うことでテキストのスタイル設定をすることができます。
text{
font-weight: bolder;
font-size: 20px;
fill:#009900; /* テキストの色 */
stroke: #007700; /* 枠線の色 */
stroke-width: 1px; /* 枠線の太さ */
}
まとめ
d3.jsでSVGでテキストを表示する基本についてご紹介でした。
複数オブジェクトになると、スタイル管理はクラスを分けた方が管理しやすいので、その方法も今後ご紹介してきます。
関連情報
リンク
リンク
リンク
