"D3.js Advanced Series-1.1" Wrap text wrap

In the "Advanced-Chapter 1.0" explains how to use the text and Tspan in SVG to achieve the function of line wrapping, this article on this feature is encapsulated, can be used directly later.

1. Reference JS file

: Multext.js

After downloading, refer to the <script> tag:

<script src= "Multext.js" charset= "Utf-8" ></script>

or directly through the URL reference:

<script src= "Http://www.ourd3js.com/library/multext.js" charset= "Utf-8" ></script>

Of course, to use this file, you should also refer to the D3 library:

<script src= "Http://d3js.org/d3.v3.min.js" charset= "Utf-8" ></script>

2. Parameters of the function

Only one function Appendmultitext () is implemented in the file, the meaning of each parameter is:

Appendmultitext (container,//text container, can be <svg> or <g> str,//String posx,//text x-coordinate posy,//text y-coordinate width,//widths of each row, Units in pixels fontsize,//Text size (can be omitted), default to 14fontfamily//text font (can be omitted), default to SimSun, Arial)

3. Add multiple lines of text

Try adding multiple lines of text below. The first thing to add is the <svg> element:

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

The added <svg> elements, which are stored in the variable SVG, are used as Appendmultitext parameters. Next add multiple lines of text:

var str = "Green son Geumcheon, leisurely my heart, but for June so, pondered so far." "; Appendmultitext (svg,str,30,100,120,20," SimSun ");

The code means: add the specified string at the coordinates (30, 100) in the SVG container, the length of each row is 120 pixels, the part of the line is wrapped automatically, the font size is 20, and the font is Arial. The results are as follows:

As you can see, four lines of text are added, each line having a length of 120 pixels. Appendmultitext automatically added <text > and <tspan> to us.

The return value of Appendmultitext () is the selection set of the <text> element that is added, which can be saved with a variable, rotated and translated, and, of course, fonts, for example:

var str = "Green son Geumcheon, leisurely my heart, but for June so, pondered so far." "; var multext = Appendmultitext (svg,str,30,100,120,20," SimSun "); Multext.attr (" Transform "," rotate (-20) ");

The text rotates counterclockwise 20 degrees.

You can also put the text in the <g> element.

var g = svg.append ("G"); var multext = Appendmultitext (g,str,30,100,120);

Thus, all elements of the multiline text are placed under <g>. The above code appendmultitext () omitted the last two parameters, if omitted, the default font size is 14px, the font is SimSun, Arial.

Thank you for reading.

Document Information

• Copyright Notice: Attribution (by)-Non-commercial (NC)-No deduction (ND)
• Published: March 12, 2015
• 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

"D3.js Advanced Series-1.1" Wrap text wrap