GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ

D3v3

【D3.js】text要素で手っ取り早く改行する方法2種。

投稿日:

d3.js tspan で改行

SVG textで改行 part.1

SVG textで改行 part.2

D3でチャートを作っていると、text要素を使ってラベルを表示するケースが多々あるのですが、text要素には改行コードなどがないため、文章を改行させたいときはひと工夫する必要があります。
いろいろな方法があるのですが、改行させた文章を左寄せ・右寄せにしたり、センタリングさせたりしたいとなるとコードが猥雑になりがちです。
そこで、手っ取り早く改行するサンプルを2つbl.ocks.orgに投稿してみました。

ちょこっと解説

文字列を配列に分割し、tspan要素で囲ってappendすることで改行を実現しています。
ポイントとしてはtspan要素のy属性とx属性をem単位で指定することで文字サイズなどが変わっても自動的に調整されるようにしています。

About Me

著者: 清水正行
所在地: 群馬県高崎市

群馬・東京間を行き来する出稼ぎエンジニア。GIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。