How to linebreak an svg text in javascript? - Stack Overflow

admin管理员组

文章数量:1185827

I am starting with d3.js, and am trying to create a network graph each circle of which contains a label.

What I want is a line break an svg text.

What I am trying to do is to break the text into multiple <tspan>s, each with x="0" and variable "y" to simulate actual lines of text. The code I have written gives some unexpected result.

var text = svg.selectAll("text").data(force.nodes()).enter().append("text");

text       
 .text(function (d) {
 arr = d.name.split(" ");
 var arr = d.name.split(" ");
 if (arr != undefined) {
  for (i = 0; i < arr.length; i++) {
   text.append("tspan")
    .text(arr[i])
    .attr("class", "tspan" + i);
  }
 }
});

In this code am splitting the text string by white space and appending the each splitted string to tspan. But the text belonging to other circle is also showing in each circle. How to overcome this issue?

Here is a JSFIDDLE / with only svg text

Here is a JSFIDDLE / showing my problem with tspan.

I am starting with d3.js, and am trying to create a network graph each circle of which contains a label.

What I want is a line break an svg text.

What I am trying to do is to break the text into multiple <tspan>s, each with x="0" and variable "y" to simulate actual lines of text. The code I have written gives some unexpected result.

var text = svg.selectAll("text").data(force.nodes()).enter().append("text");

text       
 .text(function (d) {
 arr = d.name.split(" ");
 var arr = d.name.split(" ");
 if (arr != undefined) {
  for (i = 0; i < arr.length; i++) {
   text.append("tspan")
    .text(arr[i])
    .attr("class", "tspan" + i);
  }
 }
});

In this code am splitting the text string by white space and appending the each splitted string to tspan. But the text belonging to other circle is also showing in each circle. How to overcome this issue?

Here is a JSFIDDLE http://jsfiddle.net/xhNXS/ with only svg text

Here is a JSFIDDLE http://jsfiddle.net/2NJ25/16/ showing my problem with tspan.

• javascript
• svg
• d3.js

Share Improve this question Follow asked Oct 18, 2013 at 10:24 Jetson JohnJetson John 3,82988 gold badges4141 silver badges5353 bronze badges 3

• 2 Not sure what you're trying to achieve. Are you looking for something like this? – Lars Kotthoff Commented Oct 18, 2013 at 10:35
• There is no actual new lines in svg, you need to use tspan's dy attribute to cause wrapping. – Quad Commented Oct 18, 2013 at 10:40
• Ok, I'll add that with some explanation as an answer. – Lars Kotthoff Commented Oct 18, 2013 at 11:33

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 32

You need to specify the position (or offset) of each tspan element to give the impression of a line break -- they are really just text containers that you can position arbitrarily. This is going to be much easier if you wrap the text elements in g elements because then you can specify "absolute" coordinates (i.e. x and y) for the elements within. This will make moving the tspan elements to the start of the line easier.

The main code to add the elements would look like this.

text.append("text")       
    .each(function (d) {
    var arr = d.name.split(" ");
    for (i = 0; i < arr.length; i++) {
        d3.select(this).append("tspan")
            .text(arr[i])
            .attr("dy", i ? "1.2em" : 0)
            .attr("x", 0)
            .attr("text-anchor", "middle")
            .attr("class", "tspan" + i);
    }
});

I'm using .each(), which will call the function for each element and not expect a return value instead of the .text() you were using. The dy setting designates the line height and x set to 0 means that every new line will start at the beginning of the block.

Modified jsfiddle here, along with some other minor cleanups.

本文标签： How to linebreak an svg text in javascriptStack Overflow