数据可视化(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",