How to linebreak an svg text in javascript?

Question

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.

Answer 1

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.