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>
var svg = d3.select("#svgobj").append("svg").attr("width",600).attr("height",400);
textをy座標を変えながら提示
data()で読み込んだテキストの配列順序どおりに少しずつｙ座標を変えて提示すると改行になります。
フォントの大きさと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;});
ここまでをまとめる以下のようになります。
