読者です 読者をやめる 読者になる 読者になる

jnobuyukiのブログ

JavaScriptとR言語を中心に研究活動に役立つwebアプリケーション技術について考えていきます。twitter ID: @j_nobuyuki

SVGオブジェクト上のテキストの改行

SVGオブジェクトでたくさんのテキストを表示をする場合、\nのような改行コードが認識されません。
仕様で改行ができないようです。でもD3.jsを利用すれば比較的簡単に改行を行うことができます。

テキストの準備

ここでのポイントはテキスト全体を改行位置で分割して配列に入れておくことです。例えば以下のようにしておきます。

var text = ["1行目です。","2行目です。","3行目です"];

SVGの準備

このブログに投稿したD3.js関連の項目と同様、まずはSVGオブジェクトの準備です。

HTML部

<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>

<body>
<div id = "svgobj"></div>
</body>
</html>

JavaScript

var svg = d3.select("#svgobj").append("svg").attr("width",600).attr("height",400);

textをy座標を変えながら提示

data()で読み込んだテキストの配列順序どおりに少しずつy座標を変えて提示すると改行になります。
フォントの大きさとy座標の間隔をうまく調整してください。

var txt = svg.selectAll("text").data(text).enter().append("text").attr("x",0)
.attr("y",function(d,i){return 100 + i + 25;}).style("font-size",20)
.style("fill", "black").text(function(d){return d;});

ここまでをまとめる以下のようになります。