D3 Data Visualization Practical notes

Learning is really a wonderful thing. I've seen this book before, and some of the knowledge points are completely out of the picture.

Summary: The use of knowledge to study well, usually can understand the basis of other technologies, the relevant information and difficulties recorded.

JavaScript traps

1, variable type var myName = ' SFP '; typeOf myName;          ' String ' 2, variable elevation for (var i=0; i<100; i++) {   /...} I have the definition 3 before the for loop, and the global namespace is better: Declare the variable only within the function, and declare only one global object. var local_name = {}   //declares a NULL global variable, so that only one variable is added to the window.

Svg

<svg width= ' height= ' > <circle cx= ' "cy= '" r= ' "fill= '      blue ' stroke= ' Olive ' stroke-width= ' 1 '/& Gt;</svg>

You need to specify width,height for SVG; the element's attribute values are not units

base element, path for drawing complex graphics
<svg width= ' 1 ' height= ' > <circle cx= ' "cy= '" r= ' "fill= '" Blue ' stroke= ' olive ' stroke-width= ' of ' + '--"-------"      ></circle>      <rect x= ' y= ' height= '/> ' <ellipse cx= ' 275 ' cy= ' 100.      ' ' ry= '/>      <line x1= ' 0 ' y1= ' ' x2= ', ' y2= ', ' + ', ' "stroke= '
Y is the baseline, note the text should not be cut off      <text x= ' 0 ' y= ' x ' font-size= ' ' >sfp</text></svg>

To add a style to an SVG element: opacity

Better practice: You can differentiate between SVG and CSS styles

svg. pumpkin{  /*...*/}

Drawing Order: Axis and value labels, and finally added to SVG

Use RGBA () when specifying a color for Fill,stroke to set the transparency

D3

Add <meta charset= ' Utf-8 ' to the HTML file >

S

　　

D3 Data Visualization Practical notes