上一節中咱們學會了如何旋轉x軸標籤以及自定義標籤內容,在這一節中,咱們將接觸動畫(transition)javascript
首先,咱們要在頁面上添加一個按鈕,當咱們點擊這個按鈕時,調用咱們的動畫。因此,咱們還須要在原來的基礎上添加兩個東西。html
<div id="option">
<input name="updateButton"
type="button"
value="Update"
onclick="updateData()"
/>
</div>
function updateData() {
//再次獲取數據
d3.tsv("../data/data-alt.tsv", function(error, data){
data.forEach(function(d){
d.date = parseDate(d.date);
d.close = +d.close;
});
//設置數據的規模
x.domain(d3.extent(data, function(d){ return d.date }));
y.domain([0, d3.max(data, function(d){ return d.close })]);
//選擇咱們想要應用變化的部分
var svg = d3.select("body").transition();
//變化
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);
});
}
在上面的代碼中, 咱們首先要獲取一個組先的數據,因此,咱們重新的數據文件(data-alt.tsv)中讀取新的數據。而後,仿造前面繪製圖表的方法來進行繪製,不一樣的是,這裏加入一個新的方法-transition()。java
transiton(int): 使圖表從一個狀態過渡到另外一個狀態。括號裏面能夠是一個整數,表示動畫執行的時長,固然也能夠是一個ease(type[, arguments…])方法,來表示豐富的運動。canvas
目前的代碼爲:app
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; 10 fill: none; 11 } 12 13 .axis path, 14 .axis line { 15 fill: none; 16 stroke: grey; 17 stroke-width: 1; 18 shape-rendering: crispEdges; 19 } 20 21 </style> 22 <body> 23 24 <div id="option"> 25 <input name="updateButton" 26 type="button" 27 value="Update" 28 onclick="updateData()" /> 29 </div> 30 31 <!-- load the d3.js library --> 32 <script type="text/javascript" src="d3/d3.v3.js"></script> 33 34 <script> 35 36 // Set the dimensions of the canvas / graph 37 var margin = {top: 30, right: 20, bottom: 30, left: 50}, 38 width = 600 - margin.left - margin.right, 39 height = 270 - margin.top - margin.bottom; 40 41 // Parse the date / time 42 var parseDate = d3.time.format("%d-%b-%y").parse; 43 44 // Set the ranges 45 var x = d3.time.scale().range([0, width]); 46 var y = d3.scale.linear().range([height, 0]); 47 48 // Define the axes 49 var xAxis = d3.svg.axis().scale(x) 50 .orient("bottom").ticks(5); 51 52 var yAxis = d3.svg.axis().scale(y) 53 .orient("left").ticks(5); 54 55 // Define the line 56 var valueline = d3.svg.line() 57 .x(function(d) { return x(d.date); }) 58 .y(function(d) { return y(d.close); }); 59 60 // Adds the svg canvas 61 var svg = d3.select("body") 62 .append("svg") 63 .attr("width", width + margin.left + margin.right) 64 .attr("height", height + margin.top + margin.bottom) 65 .append("g") 66 .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 67 68 // Get the initial data 69 d3.tsv("data/data.tsv", function(error, data) { 70 data.forEach(function(d) { 71 d.date = parseDate(d.date); 72 d.close = +d.close; 73 }); 74 75 // Scale the range of the data 76 x.domain(d3.extent(data, function(d) { return d.date; })); 77 y.domain([0, d3.max(data, function(d) { return d.close; })]); 78 79 // Add the valueline path. 80 svg.append("path") 81 .attr("class", "line") 82 .attr("d", valueline(data)); 83 84 // Add the X Axis 85 svg.append("g") 86 .attr("class", "x axis") 87 .attr("transform", "translate(0," + height + ")") 88 .call(xAxis); 89 90 // Add the Y Axis 91 svg.append("g") 92 .attr("class", "y axis") 93 .call(yAxis); 94 95 }); 96 97 // ** Update data section (Called from the onclick) 98 function updateData() { 99 100 // Get the data again 101 d3.tsv("data/data-alt.tsv", function(error, data) { 102 data.forEach(function(d) { 103 d.date = parseDate(d.date); 104 d.close = +d.close; 105 }); 106 107 // Scale the range of the data again 108 x.domain(d3.extent(data, function(d) { return d.date; })); 109 y.domain([0, d3.max(data, function(d) { return d.close; })]); 110 111 // Select the section we want to apply our changes to 112 var svg = d3.select("body").transition(); 113 114 // Make the changes 115 svg.select(".line") // change the line 116 .duration(750) 117 .attr("d", valueline(data)); 118 svg.select(".x.axis") // change the x axis 119 .duration(750) 120 .call(xAxis); 121 svg.select(".y.axis") // change the y axis 122 .duration(750) 123 .call(yAxis); 124 125 }); 126 } 127 128 </script> 129 </body>
下節咱們將把圖表中的曲線圖變成散點圖,以及添加提示框(Tooltips)效果。dom