上一节中我们学会了如何旋转x轴标签以及自定义标签内容，在这一节中，我们将接触动画（transition）
首先，我们要在页面上添加一个按钮，当我们点击这个按钮时，调用我们的动画。所以，我们还需要在原来的基础上添加两个东西。
添加一个按钮
<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()。
transiton(int): 使图表从一个状态过渡到另一个状态。括号里面可以是一个整数，表示动画执行的时长，当然也可以是一个ease(type[, arguments…])方法，来表示丰富的运动。
目前的代码为：
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- 2; 10 fill: none; 11 } 12 13 .axis path, 14 .axis line { 15 fill: none; 16 stroke: grey; 17 stroke- 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）效果。