D3.js：动效：更新、过渡
今天第一次体验了D3的交互行为，动画让我觉得超赞，而且没有想到居然还有像AfterEffect里的缓动特效，代码改变世界的节奏好嘛！
(ง •̀_•́)ง
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: SVG bar chart with value labels (centered)</title>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<script type="text/javascript">
var w = 600;
var h = 250;
//设定x轴比例
var xScale = d3.scale.ordinal()//指定序数集。类似ABCD
.domain(d3.range(dataset.length))//值域设置
/*映射范围，自动分档。
[0, w]计算可以均分为几档，除以值域个数
0.05设定档间距
*/
.rangeRoundBands([0, w], 0.05)
//设定y轴比例
//需要注意的是，y轴仍旧使用线性比例尺，而非序数
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, h]);
//对下面的代码进行更改。
//条形坐标·之前
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
.attr("y", function(d) {
return h - (d * 4);
})
//条形坐标·之后
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d);
})
//条形高宽·之前
.attr("width", w / dataset.length - barPadding)
.attr("height", function(d) {
return d * 4;
})
//条形高宽·之后
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return yScale(d);
})
//标签坐标·之前
.attr("x", function(d, i) {
return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
})
.attr("y", function(d) {
return h - (d * 4) + 14;
})
//标签坐标·之后
.attr("x", function(d, i) {
return xScale(i) + xScale.rangeBand()/2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
})
//监听行为
<p>Click on this text to update the chart with new data values (once)</p>
d3.select("p")
.on("click",function(){
alert("Hey,don't click that!")
})
//单击时更新数据
d3.select("p")
.on("click",function(){
dataset = [ 11, 12, 15, 20, 18, 17, 16, 18, 23, 25, 5, 10, 13, 19, 21, 25, 22, 18, 15, 13 ];
svg.selectAll("rect")
.data(dataset)
.attr("y", function(d) {
return h - yScale(d);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
svg.selectAll("text")
.data(dataset)
.text(function(d) {
return d;
})
.attr("x", function(d, i) {
return xScale(i) + xScale.rangeBand()/2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
})
});
//添加过渡效果
.transition()//过渡
.duration(2000)//持续时间
</script>
</body>
</html>