Question

157

How to linebreak an svg text in javascript?

rated 0 times [ 158] [ 1] / answers: 1 / hits: 18402 / 11 Years ago, fri, october 18, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

calicinthias

Add To Favorites

Follow

Total Points: 447

Total Questions: 101

Total Answers: 118

Location: Botswana

Member since Sat, Dec 31, 2022

1 Year ago

calicinthias questions

1 DataGrid blank/not displaying data? Material UI

Sun, Jan 2, 22, 00:00, 2 Years ago

1 How to test for useEffect inside a custom hook?

Wed, Jan 13, 21, 00:00, 3 Years ago

1 Scroll on Dropdown of antD component React

Mon, Aug 10, 20, 00:00, 4 Years ago

1 Vue.js trying to get DOM element by ID in computed returns null

Tue, Jul 14, 20, 00:00, 4 Years ago

1 Adding a key-value pair to an object inside loop using React useState hook

Fri, Jun 26, 20, 00:00, 4 Years ago

View All

answered 11 Years ago nellykaliae · Accepted Answer

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.