数据可视化(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", "translate(0," + height + ")") .call(xAxis) .append("text") .attr("class", "label") .attr("x", width) .attr("y", -6) .style("text-anchor", "end") .text("X轴"); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("class", "label") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Y轴");
其效果如下
坐标轴有些粗，是因为CSS没设置，如果设置上在之前博客里的CSS样式，会好看一点~~
先添加一个事件来触发数据的变化，在html中body标签里添加一个button
<button>Update</button>
为button绑定事件，并在事件中添加数据的更新，代码如下
// 单击的时候，更新数据 d3.select("button").on("click", function() { // 新数据集 dataset = [ 21, 22, 25, 10, 18, 17, 6, 8, 13, 15, 15, 20, 23, 19, 11,15, 25, 8, 25, 23 ]; // 更新所有矩形 svg.selectAll("rect") .data(dataset) .attr("y", function(d) { return y(d); }) .attr("height", function(d) { return height - y(d); }); });
运行代码，点击update按钮，chart发生变化，如下
如果你足够细心的话，就会发现，颜色跟原来的一样，没有根据长度发生变化，只要把原来针对fill 编写的代码复制到事件的代码里。
svg.selectAll("rect")
.data(dataset)
.attr("y", function(d) {
return y(d);
})
.attr("height", function(d) {
return height - y(d);
})
.attr("fill", function(d){
return "rgb(60, 127, " + d * 10 + ")";// 根据值的大小获取颜色
});
是不是颜色也跟着变化了。
你是不是觉得，就这么变化有些太坑了，那我们就给它加个动画，过渡一下就OK了，其实现只需简单的一行代码 .transition()
注：在方法链上，要把这个调用插到选择元素之后，改变任何属性之前
svg.selectAll("rect")
.data(dataset)
.transition() // <-- 这是新代码，其他都保持不变。
.attr("y", function(d) {
return y(d);
})
.attr("height", function(d) {
return height - y(d);
})
.attr("fill", function(d){
return "rgb(60, 127, " + d * 10 + ")";// 根据值的大小获取颜色
});
是不是有了动画，就不会觉得变化有些突然了~~
之后，我觉得想控制一下动画的时间，要让他快一点或者慢一点，其实现也只需要一行代码 .duration(2000)
svg.selectAll("rect")
.data(dataset)
.transition()
.duration(2000) // <-- 这是新代码，其他都保持不变。2000 毫秒，即2 秒
.attr("y", function(d) {
return y(d);
})
.attr("height", function(d) {
return height - y(d);
})
.attr("fill", function(d){
return "rgb(60, 127, " + d * 10 + ")";// 根据值的大小获取颜色
});
你延长了一下动画时间，发现它的动画一开始非常慢，然后逐渐加速，最后在达到预定高度之前速度再次慢了下来。换句话说，动画的速度不是线性不变的，而是有加减速变化的。
如果，我想要均匀的变化怎么办？
在D3 中，可以使用ease() 指定不同的缓动类型。默认的缓动效果是"cubic-inout"，产生的就是我们刚刚看到的那种逐渐加速然后再逐渐减速的效果。
所以我们只需要设置一下ease("linear")就可以了。我们要在transition() 之后、attr() 之前指定ease()。事实上，ease()在duration() 之前之后都没问题，但先过渡再设置缓动似乎更顺理成章。
... // 选择元素的代码 .transition() .duration(2000) .ease("linear") ... //attr() 的代码
linear是线性缓动，就是没有逐渐加速和减速的变化，所有元素都按照一个速度变化，变化到最终值时戛然而止。
除此之外，还有很多缓动函数可供选择。下面只是几个，不是全部
• circle
逐渐进入并加速，然后突然停止。
• elastic
描述这个效果的一个最恰当的词是“有弹性”。
• bounce
像皮球落地一样反复弹跳，慢慢停下来。
详细可以查看：https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease
我们再来想一下，如果这个动画，我不想让它一开始就跑起来，我想让它晚点跑起来，比如说2秒后。
那我们只需要在添加一个方法.delay(2000)，就OK了
... .transition() .delay(2000) //2000 毫秒，即2 秒 .duration(2000) //2000 毫秒，即2 秒 ...
与使用duration() 和ease() 一样，把delay() 放到哪里并没有十分严格的限制，但我更喜欢把它放在duration() 前面。因为是先设定延迟时间，然后过渡动画才开始计时，这样比较符合逻辑。
上面的代码是静态延时，静态延迟时间只是一种延迟方式，更有意思的是可以动态计算延迟时间。动态延迟的一个常见用途就是创建交错延迟的效果，让某些过渡在另一个过渡之前发生。交错延迟对人的感知有利，因为当相邻元素的变化不那么同步时，人眼更容易注意到每个元素的变化。要设置动态延迟，就别给delay() 传递静态值，而是给它传入一个函数，按照D3 的惯例……对，就是传入一个匿名函数。
... .transition() .delay(function(d, i) { return i * 100; }) .duration(500) ...
在匿名函数中，与当前元素绑定的数据值是以d 传入的，而这个元素的位置是以i传入的。因此，这里的意思是让D3 循环遍历每个元素，把它们的动画延迟时间设定为i * 100，也就是后一个元素的动画开始时间总比前一个元素晚100 毫秒。
到这里，也许你会提出一个疑问，如果变化的时候数据超出了原来的范围，怎么办？
那我们就需要更新比例尺了，更新比例尺的代码很简单。
// 更新比例尺的值域 y.domain([0, d3.max(dataset)]);
今天就先到这里，写博客时间长了，觉得有点腰疼。
等有时间再继续更新吧~~
继续写这篇博客，就不另起一篇了~~
迄今为止，只要更新数据，我们采用的都是“整批整包”的方式：改变数据集数组中 的值，然后重新绑定修改后的值，覆盖原始值对DOM 元素的绑定。这种方式非常适合所有值都会改变，而且数据集长度（即数据值的数量）不变的情形。可是我们知道，现实中的数据可没那么简单。这就对代码的灵活 性提出了更高要求，比如只更新一两个值，或者支持增加值和减少值。
添加值（和元素）
首先我们需要在数据中插入一个值，并更新一下数轴的值域。
dataset.push(10);
x.domain(d3.range(dataset.length));
然后选出之前的元素，然后插入，插入的代码跟刚开始的代码很像。
// 加入…… var bars = svg.selectAll("rect") .data(dataset);// 选择出之前的元素 bars.data(dataset) .enter() .append("rect") .attr("x", x(dataset.length - 1))//这行代码设定了新条形的水平位置，让它恰好位于SVG 区域的最右边。 .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 + ")"; });
最后，再更新所有的数据就OK了
bars.transition() .duration(500) .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 + ")"; });
这样，动态的添加一条数据就实现了，然后你会发现数据的坐标轴的刻度没有变，那就需要再去更新一下坐标轴的刻度。在更新值域的代码后面，添加如下代码
xAxis.scale(x); svg.select("g.x.axis") .call(xAxis);
你会发现坐标轴的刻度也跟着变化了~~
删除值（和元素）
把每次单击时添值到数据集，改为使用shift() 方法从数组中删除第一个元素。
// 从数据集中删除一个值 dataset.shift();
然后取得退出元素集，然后把它们过渡到右边，最后，删除它们
// 退出…… bars.exit() .transition() .duration(500) .attr("x", w) .remove();
remove() 是一特殊的过渡方法，它会在过渡完成后从DOM 中永远地删除元素。移除之后坐标轴的更新和之前的添加元素相同。
通过键联结数据
在把数据绑定到DOM 元素时（即调用data() 时），就会发生数据联结。默认的联结是按照索引顺序，即第一个值绑定到元素集中第一个DOM 元素，第二个值绑定到元素集中第二个DOM 元素，依此类推。如果数据值与DOM 元素的顺序不一样呢？那就得告诉D3 怎么实现值和元素间的联结或配对。好在，通过定义键函数（key：function），可以指定相应的规则。
先准备数据，之前，我们的数据集就是包含简单数值的数组。而为了使用键函数，每个值必须有对应的键。
var dataset = [
{ key: 0, value: 5 }, { key: 1, value: 10 }, { key: 2, value: 13 }, { key: 3, value: 19 }, { key: 4, value: 21 }, { key: 5, value: 25 }, { key: 6, value: 22 }, { key: 7, value: 18 }, { key: 8, value: 15 }, { key: 9, value: 13 }, { key: 10, value: 11 }, { key: 11, value: 12 }, { key: 12, value: 15 }, { key: 13, value: 20 }, { key: 14, value: 18 }, { key: 15, value: 17 }, { key: 16, value: 16 }, { key: 17, value: 18 }, { key: 18, value: 23 }, { key: 19, value: 25 }
];
更新引用，许多以前用d的地方要修改为d.value，如
var y = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d.value;})]) .range([0, height]);
链接键函数，在data一个数据集时，使用如下代码，就OK了。
.data(dataset, function(d) { return d.key; })
关于数据的更新和动画就先到这里为止了，之后会写D3的交互和布局~~
