上一节中我们学会了如何旋转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 again101 ????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 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(750)123 ????????????.call(yAxis);124 125 ????});126 }127 128 </script>129 </body>下节我们将把图表中的曲线图变成散点图，以及添加提示框（Tooltips）效果。
D3.js学习（七）
原文地址：https://www.cnblogs.com/magic-xxj/p/9186376.html