[D3.js advanced series-1.0] text line feed and d3.js line feed

[D3.js advanced series-1.0] text line feed and d3.js line feed

Adding text in SVG uses text elements. However, this element cannot be automatically wrapped, and the excess content cannot be displayed. What should I do?

Preface to the advanced series

Start to write Advanced series tutorials today. In other words, due to my limited strength, it is not necessarily guaranteed that the entry-advanced level is more difficult than the first-level. You just need to select what you need to read.

The advanced series is expected to first write some common small issues (such as this article) and the remaining three la S (matrix tree, stack, and bundle ), then, write some complicated graph creation methods and their interactive operations, such as Mind Map, multi-graph Association, and map marking.

Recently, my throat has been burning like a fire. I hope it will be better. O (> others <) o

1. What is Text wrap?

Existing string:

Var str = "who sent the brocade book in the cloud? When the yundun word is returned, the moon is full in the West Building ";

Have you read Li Qingzhao's cut plum?

Add an svg element to the body. The size is as follows:

var width = 300;var height = 300;var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);

Then add the text and use the text element. We are familiar with such code:

var text = svg.append("text").attr("x",30).attr("y",100).attr("font-size",30).attr("font-family","simsun").text(str);

The result is as follows:

As you can see, although the content of the text element tag contains the entire string, because the svg width is only 300, it cannot display such a long string, so the excess part is not seen.

What should I do? A line feed is required.

2. Add a tspan sub-element to text.

Text in SVG does not support automatic line feed, which must be manually implemented. One of the methods is to use the tspan tag.

Tspan is written in text and exists as its child element. When setting the text attribute, There Is A dy attribute, indicating the relative displacement of the y axis. The dy value is usually a value such as 10px and 1em, where em is the unit of action.

In this way, we can add multiple tspans in text, each representing a row. Each tspan attribute is assigned a 1em value (that is, a row ). In this way, the text is displayed in one row.

Svg code:

<Text x = "30" y = "100" font-size = "30" font-family = "simsun"> <tspan x = "30" dy = "1em"> the night is the night when you dream of returning home </tspan> <tspan x = "30" dy = "1em"> xiaoxuan window </tspan> <tspan x = "30" dy = "1em"> dressing </tspan> </text>

Note that the x attribute in tspan is necessary, indicating that the next row is also displayed from x = 30.

3. How to Write D3 code

For the first character string, add a text element to svg without setting its content.

Var str = "who sent the brocade book in the cloud? When the yundun word is returned, the moon is full in the West Building"; var text = svg. append ("text "). attr ("x", 30 ). attr ("y", 100 ). attr ("font-size", 30 ). attr ("font-family", "simsun ");

Use split of JavaScript strings to segment str:

var strs = str.split("，") ;

Separated by commas. The output result is an array. The items in the array are substrings. The strs value is:

["Who sent a brocade book in the cloud", "yundun back", "Moon West Building"]

Well, next we will focus on Binding data to the text element and adding a tspan element with the same length as strs. Then, assign values to its x and dy attributes, and then specify the string content.

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 result is as follows:

Complete.

For the complete code, right-click the following link to view the source code:

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

Thank you for reading.

Document Information

• Copyright Disclaimer: BY-non-commercial (NC)-deduction prohibited (ND)
• Published on: February 1, March 2, 2015
• More content: OUR D3.JS-data visualization special site and CSDN personal blog
• Note: This article is published in OUR D3.JS. For more information, see the source. Thank you.