Can not break long sentence in a D3-generated SVG text

Question

I want to break long sentence into two line in my SVG text that is generated by D3. But I can't do it in D3/javascript. I tried with \n and <br/>, but they are not working.

<!DOCTYPE html>
<html>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">
    var margin = {top: 80,left: 70, bottom: 80,right: 100},
        height = 660 - margin.top - margin.bottom,
        width = 1320 - margin.left - margin.right;

    var chart = d3.select("body")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate("+margin.left+","+margin.top+")");

    chart.append('text')
        .attr('x', 100)
        .attr('y', 100)
        .text("I want to have this \n sentence in two lines")
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .style("font-family", "Helvetica, Arial, sans-serif")
        .style("font-weight", "bold")
        .style("font-size", "16px" )
        .style("fill", "#1ABC9C");

</script>
</body>
</html>

I changed and checked my answer, now it works. check it out and let me know if it works for you as well. — Mehran Hatami, Jan 01 '14 at 11:07
In SVG, use several `tspan` elements -- see e.g. http://stackoverflow.com/questions/13241475/how-do-i-include-newlines-in-labels-in-d3-charts — Lars Kotthoff, Jan 01 '14 at 11:34

Varadha31590 · Answer 1 · 2014-07-30T09:46:23.313

4

Use .append("foreignObject").append("xhtml:span").html("your text <br> will goes here"); instead of .text() function.

Example:

var mytext=svg.append("foreignObject").attr("width"100).attr("height",50).append("xhtml:span")
.html("Your Text <br> goes here");

You dont need the br tag here the text will automatically wrapped in to the next line when specified width is reached.

edited Jul 30 '14 at 09:46

answered Jul 30 '14 at 09:41

Varadha31590

371
5
20

score 2 · Answer 2 · edited May 23 '17 at 11:56

It looks to me that Mehran is right - you MUST use .append("tspan") for multiline SVG text. +1 vote for Mehran. I also just wanted to bring to your attention recent question and answer. You'll see very similar solution with .append("tspan") If you need to programatically split the string into several lines (with the ability to define "width" for splitting), there is also a function wordwrap2() there. I spent a lot of time finding the right function for that purpose, this one is well tested.

There are also other questions on this topic, maybe you'll find something useful there:

How do I include newlines in labels in D3 charts?

Breaking text from json into several lines for displaying labels in a D3 force layout

How to break a line in d3.axis.tickFormat?

Auto line-wrapping in SVG text (alternative approach with "foreign objects")

Note that the name of the element is `tspan` and not `span`. There is no `span` element in SVG. — Lars Kotthoff, Jan 01 '14 at 15:28

score 1 · Answer 3 · edited Jan 06 '14 at 12:01

1

do this instead:

var textNode = chart.append('text');
textNode.attr('x', 100)
    .attr('y', 100)
    .attr("dy", "1em")
    .style("text-anchor", "middle")
    .style("font-family", "Helvetica, Arial, sans-serif")
    .style("font-weight", "bold")
    .style("font-size", "16px" )
    .style("fill", "#1ABC9C");
textNode.append("span").text("I want to have this");
textNode.append("br");
textNode.append("span").text("sentence in two lines");

edited Jan 06 '14 at 12:01

VividD

10,456
6
64
111

answered Jan 01 '14 at 10:16

Mehran Hatami

12,723
6
28
35

I tried as you said, it doesn't give me any output. I did inspect element, I see this line ``. it doesn't have the text that I have given in `.html()`. – user3002180 Jan 01 '14 at 10:23

Can not break long sentence in a D3-generated SVG text

3 Answers3