Home > Developer > Web Develop
In the previous section we learned how to rotate x-axis labels and custom label content, and in this section we will touch Animations (transition)
First, we're going to add a button to the page that calls our animations when we click on this button. So, we also need to add two things on the original basis.
Add a button<div id="option" >
<input name="UpdateButton"
type="button"
value="Update"
onclick="UpdateData ()"
/>
Add an animation function</div>
function UpdateData () {Get the data again
D3.TSV (function (Error, data) { Data.foreach (function (d) {D.date = Parsedate (d.date);
D.close = +d.close;
});
Set the size of your data
Return d.date});
Return d.close})];
Select the part that we want to apply the change to
var svg = d3.select ("Body"). Transition ();Change
Svg.select (". Line"). Duration (750)
. attr ("D", Valueline (data)); Svg.select (". X.axis"). Duration (750)
. Call (Xaxis);
Svg.select (". Y.axis"). Duration (750)
. Call (YAxis);
});
}
In the above code, we first want to get a set of first data, so we read new data from the data file (DATA-ALT.TSV). Then, copying the previous method to draw the chart, the difference is that there is a new method-transition () added here.
Transiton (int): transitions the chart from one state to another. Parentheses can be an integer, indicating the length of time the animation is executed, or it can be a ease (type[, arguments ...]) method to represent a rich movement.
The current code is:
1 <! DOCTYPE html> 2 <meta charset= "Utf-8" > 3 <style>/* Set the CSS */4 5 body {font:12px Arial;} 6 7 Path {8 stroke:steelblue; 9 Stroke-width:2; Ten Fill:none; Axis path, axis line {fill:none, Stroke:grey, stroke-width:1, and Shape-rende Ring:crispedges; + </style> <body> <div id= "option" > <input name= "UpdateButton" 26 Type= "button" value= "Update" onclick= "UpdateData ()"/> </div> <!-- Load the D3.js library---<script type= "Text/javascript" src= "D3/d3.v3.js" ></script> <SC ript>//Set The dimensions of the canvas/graph notoginseng var margin = {top:30, right:20, bottom:30, left:50}, 38 width = 600-margin.left-margin.right, height = 270-margin.top-margin.bottom; +//Parse the date/time var parsedate = D3.time.format("%d-%b-%y"). Parse; Ranges//Set the var x = D3.time.scale (). Range ([0, Width]); The var y = d3.scale.linear (). Range ([height, 0]); Define the axes-var Xaxis = D3.svg.axis (). scale (x) Orient ("Bottom"). Ticks (5); Wuyi var yaxis = D3.svg.axis (). scale (Y). Orient ("left"). Ticks (5); Define the line, var valueline = D3.svg.line (). x (function (d) {return x (d.date);}). Y (funct Ion (d) {return y (d.close);}); Adds the SVG canvas, var svg = d3.select ("Body"), Append ("SVG"). attr ("width", width + Margin.left + margin.right)-attr ("height", height + margin.top + margin.bottom). Append ("G") 66 . attr ("transform", "translate (" + Margin.left + "," + Margin.top + ")"); Initial data D3.TSV ("DATA/DATA.TSV", function (error, data) {Data.foreach (function (d) {71 D.date = Parsedate (d.date); D.close = +d.close; 73}); About//SCale the range of the data X.domain (d3.extent (data, function (d) {return d.date;})); Y.domain ([0, D3.max (data, function (d) {return d.close;})]); Valueline//Add the path. Svg.append ("path") Bayi. attr ("Class", "line") attr ("D", Valueline (data)); Svg.append//Add the X axis ("G") attr ("Class", "X axis") attr ("Transform", "tra Nslate (0, "+ height +") "). Call (Xaxis); Svg.append ("G") attr ("Class", "Y axis") of the Y axis ("the"). 94 95}); /* * Update data section (called from the onclick) 98 function UpdateData () {+//Get the data again101 D3.TSV ("DATA/DATA-ALT.TSV", function (error, data) {102 Data.foreach (function (d) {103 d.date = P Arsedate (d.date); 104 d.close = +d.close;105}) 106 107//scale the range of the data again 10 8 X.domain (d3.extent(Data, function (d) {return d.date;})); 109 Y.domain ([0, D3.max (data, function (d) {return d.close;})]); 111//Select The section we want to apply our changes to112 var svg = d3.select ("Body"). Transition (); 113 114 Make the changes115 svg.select ('. Line ')//Change the line116. Duration (750) 117. attr ("D", Valueline (data)) 118 Svg.select (". X.axis")//Change the X axis119. Duration (750) 120 . Call (Xaxis), 121 svg.select (". Y.axis")//Change the y axis122. Duration. cal L (YAxis); 124}) 126}127 </script>129 </body>View Code
In the next section, we'll turn the graphs in the chart into scatter plots and add a cue box (tooltips) effect.
D3.js Study (vii)
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
