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 閱讀(2920) 評論(4) 收藏舉報

刷新頁面返回頂部

MockingBird

活著，是一場修行

D3.js學習（七）

添加一個按鈕

添加一個動畫函數

公告

MockingBird

活著， 是一場修行

D3.js學習（七）

添加一個按鈕

添加一個動畫函數

公告

活著，是一場修行