Line break for "D3.js Advanced Series-1.0" text

Adding text in SVG is using the literal element. However, this element can not be automatically wrapped, the outside part of the display is not out, how to do?

The advanced series begins with the preface

Start writing Advanced Series tutorials today. Or that sentence, because I have limited strength, not necessarily guaranteed entry-advanced-Senior, is the first level than the first difficulty, we choose their own needs to read.

The advanced series is expected to write some common small problems (such as this article) and the remaining three layouts (Matrix tree, stack diagram, bundle), and then write some more complex diagram of how to make, and its interactive operation, such as: Mind map, multi-graph linkage, map marking and so on.

Recently, the throat is like a fire, very uncomfortable, hoping to quickly good. O (>﹏<) o

1. What's wrong with word wrapping?

Existing string:

var str = "Who sent brocade book in the Cloud, the wild goose Word back when, the moon fills the West building";

Li Qingzhao's a cut Mei, read it?

Add an SVG element to the body with the following size:

var width = 300;var height = 300;var svg = d3.select ("Body"). Append ("SVG"). attr ("width", width). attr ("height", height);

And then add the text, with the text element, so we're familiar with the code:

var text = svg.append ("text"). attr ("x", "+"). attr ("y", +). attr ("Font-size", "attr"). Text ( STR);

The results are as follows:

As you can see, the contents of the text element label have the entire string, but because SVG has a width of only 300, it does not show so long a string, so the extra part is not visible.

What to do? It is natural to break the line.

2. Add Tspan child elements in text

Text in SVG does not support line wrapping and needs to be implemented manually. One way is to use the Tspan tag.

Tspan is written in text, as its child element exists. When setting the Text property, there is a Dy property that represents the relative displacement of the y-axis, and the value of dy is usually 10px, 1em, where EM is in the unit of behavior.

In this way, we can add multiple Tspan in text, each representing a single row. Each of the Tspan attributes is given a 1em value (that is, one row). This way, the text is displayed one line at a line.

The SVG code is:

<text x= "" y= "font-size=" "font-family=" SimSun "><tspan x=" "dy=" 1em "> Night come Back to the return </tspan> <tspan x= "dy=" 1em "> Small Xuan Window </tspan><tspan x=" "dy=" 1em "> Positive dressing </tspan></text>

Note that the X attribute in Tspan is necessary to indicate that the next line also starts at x = 30.

3. How to write D3 code

For the first section of the string, a text element is added to SVG, but its contents are not set.

var str = "who sends Brocade books in the cloud, the wild goose Word back, the moon fills the West building"; var text = svg.append ("text"). attr ("X", "()"). attr ("y", +). attr ("Font-size", "."). attr (" Font-family "," SimSun ");

Split str using a JavaScript string fragment:

var STRs = Str.split (",");

Use a comma as a delimiter, divided into segments. The output is an array, and the items in the array are substrings. Then the value of STRs is:

["Who sends Brocade books in the Cloud", "Wild goose Word Back", "Moon full West Building"]

OK, here's the point, bind the data to the text element and add the Tspan element with the same length as the STRs. Then, assign a value to its X and Dy properties, and then specify the string contents.

The code is as follows:

Text.selectall ("Tspan"). Data (STRs). Enter (). Append ("Tspan"). attr ("X", Text.attr ("X")). attr ("dy", "1em"). Text ( function (d) {return D;});

The results are as follows:

Complete.

The complete code can be found in the following links, right-click on the source code:

Http://www.ourd3js.com/demo/G-1.0/tspan.html

Thank you for reading.

Document Information

• Copyright Notice: Attribution (by)-Non-commercial (NC)-No deduction (ND)
• Published: December 28, 2014
• More content: our D3. JS-Data Visualization special station and CSDN personal blog
• Remark: This article is published in our D3. JS, reproduced please indicate the source, thank you

Line break for "D3.js Advanced Series-1.0" text