CODEWITHSUNDEEP
javascriptchartsd3.js
user3002180
user3002180

Reputation: 431

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

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>

Upvotes: 2

Views: 2132

Answers (3)

Varadha31590
Varadha31590

Reputation: 381

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.

Upvotes: 4

Mehran Hatami
Mehran Hatami

Reputation: 12961

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");

Upvotes: 1

VividD
VividD

Reputation: 10536

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")

Upvotes: 2

Related Questions