The previous one is the drawing of the curve, so that only there is a line, completely not the data want to show the content, so we want to add coordinate system, add coordinate system and draw line similar.
1. Still no change in HTML page
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title></title> <Linkrel= "stylesheet"href= "Css/style.css" /> </Head> <Body> <DivID= "Container"></Div> </Body> <Scripttype= "Text/javascript"src= "Js/d3.js" ></Script> <Scripttype= "Text/javascript"src= "Js/index.js" ></Script></HTML>
2. Changed CSS style files, mostly domain and tick style additions
#container{width:500px;Height:250px;Background-color:#ccc;margin:0 Auto;Margin-top:100px;}Path{Fill:None;Stroke:Cornflowerblue;Stroke-width:2px;}. Domain,.tick Line{Stroke:Gray;Stroke-width:1px;}
3. JS code to complete the function
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 formatvarLine_generator = D3.svg.line ()//functions for drawing curves in D3. x (function(d, I) {returnScale_x (i);})//the value of x in the curve. Y (function(d) {returnScale_y (d);})//the value of y in the curve. Interpolate ("Cardinal")//set the curve smoothD3.select ("G"). Append ("Path"). attr ("D", Line_generator (data))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
4. The finished style
Draw a chart with D3 (3)--add axes and text labels
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
