Draw a chart with D3 (4)--area chart

The plot of an area chart is a small change on the basis of a curve chart. The other code is not the same as drawing a curve chart, the following is the code of the yellow background color is modified, is not very simple, the first sentence is to modify the function (line) of the previous drawing lines to the area of the function (areas); the second line of code is the added line, ". Y0 (G_ Height) "This means that the X axis is represented. ". Y1 (function (d) {return scale_y (d);})" This sentence and the previous sentence constitute an area, ". Style (" Fill "," Cornflowerblue ")" The sentence is to give this area a fill color. "

1.js Code

varwidth = $, height = +, margin = {left:50, top:30, right:20,bottom:20},g_width= Width-margin.left-Margin.right,g_height= Height-margin.top-Margin.bottom;//get Div, add svg to the insidevarSVG = D3.select ("#container"). Append ("Svg:svg")//inserting SVG in "container". attr ("width", width)//set the width of SVG. attr ("height", height)//set the height of SVG//Add G elementvarg = D3.select ("SVG"). Append ("G"). attr ("Transform", "Translate (" +margin.left+ "," +margin.top+ ")")vardata = [0,1,3,5,9,4,2,3,6,8]//defines an array with arbitrary numbers placed inside it.varscale_x = D3.scale.linear ()//scale the curve proportionally along the x-axis. domain ([0, Data.length-1]). Range ([0, G_width])varScale_y = D3.scale.linear ()//scale the curve along the y-axis. Domain ([0, D3.max (data)]). Range ([G_height,0])//make the y-axis appear mathematically, not the browser's format var area_generator = D3.svg.area ()//function of drawing area in D3. x (function(d, I) {returnScale_x (i);})//the value of x in the curve. Y0 (g_height)//equivalent to X coordinate. Y1 (function(d) {return scale_y (d);})//the value of y in the curve. Interpolate ("Cardinal")//set the curve smoothD3.select ("G"). Append ("Path"). attr ("D", area_generator(data)) . Style ( "Fill", "Cornflowerblue") varX_axis =D3.svg.axis (). Scale (scale_x), Y_axis= D3.svg.axis (). Scale (Scale_y). Orient ("left") G.append ("G"). Call (X_axis). attr ("Transform", "translate (0," +g_height+ ")") G.append ("G"). Call (Y_axis). Append ("Text"). Text ("Price (￥)"). attr ("Transform", "rotate (-90)")//Text Rotation -90°. attr ("Text-anchor", "End")//Font Trailing alignment. attr ("dy", "1em")//translate a font size along the y-axis

2.

Draw a chart with D3 (4)--area chart