D3.js学习（七）

上一节中我们学会了如何旋转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>
View Code

 

 

 

下节我们将把图表中的曲线图变成散点图，以及添加提示框（Tooltips）效果。

posted @ 2013-10-21 11:37  CodingMonkey  阅读(2903)  评论(4)  编辑  收藏  举报