D3.js packaging text to achieve automatic line-wrapping and rotation translation and other functions _javascript skills

We don't say much, this article mainly introduces the use of D3.js packaging text to achieve the function of automatic line-wrapping, let's take a look together.

I. Referencing multext.js documents

Multext.js

function Appendmultitext (container, str, POSX, posy, Width, fontsize, fontfamily) {if (Arguments.length < 6) {
			FontSize = 14;
			} if (Arguments.length < 7) {fontfamily = "SimSun, Arial";
			
			//Gets the segmented string var STRs = Splitbyline (str,width,fontsize); var multext = container.append ("text"). attr ("x", Posx). attr ("Y", posy). Style ("Font-size", fontsize). Style
				
			("font-family", fontfamily); Multext.selectall ("Tspan"). Data (STRs). Enter (). Append ("Tspan"). attr ("X", Multext.attr ("X")). attr ("D
				Y "," 1em "). Text (function (d) {return D;
				
			});
			
			return multext;
				function Splitbyline (str,max,fontsize) {var curlen = 0;
				var result = [];
				var start = 0, end = 0;
					for (Var i=0;i<str.length;i++) {var code = str.charcodeat (i); var Pixellen = code > 255?
					FONTSIZE:FONTSIZE/2;
					Curlen + = Pixellen;
						if (Curlen > Max) {end = i; Result.push (Str.substrinG (Start,end));
						start = i;
					Curlen = Pixellen;
						} if (i = = = str.length-1) {end = i;
					Result.push (str.substring (start,end+1));
			} return result; }
}

Can be saved as later, referenced in the <script> label:

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

Second, the function of the parameters

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

Appendmultitext ( 
  container,     //text container, can be <svg> or <g>  
  str,        //String 
  posx,        // The x-coordinate of the text, the y-coordinate of the text,//The        width of       each line, the pixel 
  fontsize, the size of the text      (omitted), and the default is 
  posy. FontFamily     //Text font (can be omitted), default to SimSun, Arial 

Three, add multiple lines of text

Add multiple lines of text below to try. To add the <svg> element first:

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

The added <svg> element, which is stored in the variable SVG, is appendMultiText used as a parameter.

Next, add multiple lines of text:

var str = "Green son Jin, leisurely my heart, but for the monarch, pondered so far." ";       
             

The meaning of the code is to add the specified string in the coordinates (30, 100) in the SVG container, with each line having a length of 120 pixels, the excess part wrapping automatically, the font size 20, and the font as the Arial.

The results are as follows:

As you can see, four lines of text have been added, with a length of 120 pixels per line. appendMultiTextautomatically added and for us <text > <tspan> .
appendMultiText()The return value is the selected set of elements that are added, <text> you can save this value with a variable, do a rotation translation, and, of course, change the font, for example:

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

The text rotates 20 degrees counterclockwise.

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

var g = svg.append ("G"); 
             

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

Summarize

The above is the use of D3.js packaging text to achieve automatic line-wrapping function of all content, I hope this article content for everyone to learn or use d3.js can help, if you have questions you can message exchange.