上一节中我们学会了如何旋转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-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）效果。
原文：https://www.cnblogs.com/magic-xxj/p/9186376.html