数据可视化(8)--D3数据的更新及动画

最近项目组加班比较严重，D3的博客就一拖再拖，今天终于不用加班了，赶紧抽点时间写完~~

今天就将D3数据的更新及动画写一写~~

接着之前的博客写~~

之前写了一个散点图的例子，下面可以自己写一个柱状图的例子。

我就直接给代码了，和散点图差不多~~

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
var dataset = [ 11, 12, 15, 20, 18, 17, 16, 18, 23, 25, 8, 10, 13, 19, 21, 25, 22, 18, 15, 13];
// 使用了d3.scale.ordinal() 它支持范围分档。与定量比例尺（如d3.scale.linear()）返回连续的范围值不同，序数比例尺使用的是离散范围值，也就是输出值是事先就确定好的。
// 映射范围时，可以使用range()，也可以使用rangeBands()。后者接收一个最小值和一个最大值，然后根据输入值域的长度自动将其切分成相等的块或“档”。0.2也就是档间距为每一档宽度的20%。
var x = d3.scale.ordinal()
    .domain(d3.range(dataset.length))
    .rangeBands([0, width], 0.2);

var y = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d; })])
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


svg.selectAll("rect")// 插入的不是circle了，改为rect
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d,i) {
        return x(i);
    })
    .attr("y", function(d) {
        return y(d);
    })
    .attr("width", x.rangeBand())
    .attr("height", function(d) {
        return height - y(d);
    })
    .attr("fill", function(d){
      return "rgb(60, 127, " + d * 10 + ")";// 根据值的大小获取颜色
    });
svg.append("g")
      .attr("class", "x axis")
      .attr("transform",