Dmitry
Interactive Data in Action

Follow

Interactive Data in Action

Follow
D3_Auto line breaking in SVG text

D3_Auto line breaking in SVG text

Dmitry's photo
Dmitry
ยทApr 23, 2021ยท

2 min read

Latest days I've been struggling with of how to automatically break lines of text in SVG text using d3.js.

I've tried to do it with <tspan> element, but in this case you would need to think about many things like looping for all your <text> elements, number of text symbols in one row, position of each and every line and so on ๐Ÿคฏ

Then I even decided to check how it looks like in Adobe Illustrator, but break lines there are looking really ugly and weird ๐Ÿคช: Text breaking in AI Each text symbol is in his own <text>- tag and this difficult logic with transform-matrix, but at the very first line on this code I noticed <rect> element with it's own position properties and as well as width and height ๐Ÿ’ก

So I decided that I need some kind of wrapper for my <text> elements, that's how I found information about <foreignObject> element and voila it worked for me:

Labels with auto linebreaks

My snippet of code in HTML:

<svg>
            <g class='labels'>
                <foreignObject id='l0'
                               width="80"
                               height="50">
                    <text class='hidden'></text>
                </foreignObject>
                <foreignObject id='l1'
                               width="80"
                               height="160">
                    <text class='hidden'></text>
                </foreignObject>
            </g>
        </svg>

My snippet of code in JS:

      d3.select("svg")
        .select("#l" + i)
        .attr("x", x)
        .attr("y", y)
        .text(text)
        .classed("hidden", false);

So, I made template in my HTML code with slots for my future <text> elements and each of them I wrapped into <foreignObject> element with it's own id which I call now on JS side and put text I needed just into it.

Good luck in coding! ๐Ÿ˜‰

ย 
Share this