D3.js学习（七）

 
    type="button"
 
    value="Update"
 
    οnclick="updateData()"
 
/>
 

添加一个动画函数

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 
   2 
   3 
  22 
  23 
  24 

  25     
  29 
  30 
  31     
  32 
  33 
  34 
 129 

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

转载于:https://www.cnblogs.com/MockingBirdHome/p/3380292.html