【D3.V3.js系列教程】（十六）--更新、过度和动画
<!DOCTYPE html><html> <head><meta charset="utf-8"><title>testD3-18-update.html</title><script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script></head><body><button>单击更新</button><br><p>单击添加</p><br><a>单击删除</a><br><script type="text/javascript">//(1)准备数据集var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];//(2)设置SVG的高宽var w=600;var h=250; var barPadding = 1;//(3)定义序数比例尺var xScale=d3.scale.ordinal()//序数比例尺 .domain(d3.range(dataset.length)) .rangeRoundBands([0,w],0.05); var yScale=d3.scale.linear()//y仍然是线性比例尺.domain([0,d3.max(dataset)]).range([0,h]); //(4)Create SVG elementvar svg = d3.select("body")//选中DOM中的目标元素.append("svg")//为目标元素附加上一个svg子元素.attr("width", w)//设置这个svg的宽.attr("height", h);//设置这个svg的高//(5)为SVG添加条形svg.selectAll("rect")//选中空元素，表示即将创建这样的元素.data(dataset)//对此后的方法都执行dataset.length遍.enter()//数据元素值比前面选中的DOM元素多就创建一个新的DOM元素.append("rect")//取得enter的占位元素，并把rect追加到对应的DOM中.attr("x", function(d, i) {//设置横坐标，从0开始每次右移元素宽那么长(w / dataset.length)//return i * (w / dataset.length);return xScale(i);//这里使用序数比例尺，自己去找刚才划分好的档位}).attr("y", function(d) {//设置纵坐标，纵坐标正方向是从上往下的，所以条有多长就要设置起点是相对于h再向上移动条长return h - yScale(d);})//.attr("width", w / dataset.length - barPadding)//设置元素宽，留出间隙宽barPadding。.attr("width", xScale.rangeBand())//这里xScale比例尺已经设置间距了所以直接用.attr("height", function(d) {return yScale(d);}).attr("fill", function(d) {//设置RGB颜色与数值的关系return "rgb(0, 0, " + (d * 10) + ")";});//(6)为条加上数值svg.selectAll("text") .data(dataset) .enter() .append("text") .text(function(d) { return d; }) .attr("text-anchor", "middle") .attr("x", function(d, i) { return xScale(i)+xScale.rangeBand()/2; }) .attr("y", function(d) { return h - yScale(d) + 14; }) .attr("font-family", "sans-serif") .attr("font-size",function(d) { return xScale.rangeBand()/2; }) .attr("fill", "white");//(15)删除一条d3.select("a").on("click",function(){//选择所有条dataset.shift();//更新X轴比例尺xScale.domain(d3.range(dataset.length));var bars=svg.selectAll("rect").data(dataset); bars.exit().transition().duration(500).attr("x", w).remove();});//(14)添加一条d3.select("p").on("click",function(){//数据集最后添加数值var maxValue=75;var newNumber =Math.floor(Math.random()*maxValue);//0-24的整数dataset.push(newNumber);//更新X轴比例尺xScale.domain(d3.range(dataset.length));//选择所有条var bars=svg.selectAll("rect").data(dataset); //绑定数据到元素集，返回更新的元素集var texts=svg.selectAll("text").data(dataset);//添加条形元素到最右边bars.enter().append("rect").attr("x",w);//在SVG最右边，不可见//texts.enter().append("text"); //更新新矩形到可见范围内//并在这个时候根据数据集为每个条设置对应的属性bars.transition().duration(500).attr("x", function(d, i) { return xScale(i) ; })//每个X对应到它相应的档位上.attr("y", function(d) { return h - yScale(d) ; }).attr("width", xScale.rangeBand())//这里xScale比例尺已经设置间距了所以直接用.attr("height", function(d) {return yScale(d);}).attr("fill", function(d) {//设置RGB颜色与数值的关系return "rgb(0, 0, " + (d * 10) + ")";});//texts.transition().duration(500).text(function(d) { return d; }) .attr("text-anchor", "middle") .attr("x", function(d, i) { return xScale(i)+xScale.rangeBand()/2; }) .attr("y", function(d) { return h - yScale(d) + 14; }) .attr("font-family", "sans-serif") .attr("font-size", "12px") .attr("fill", "red");});//(7)更新条形数长短的代码,需要一个button标签配合//特别注意：这里选中的元素必须在d3选择器之前，或许要先加载完了元素才能被选中d3.select("button").on("click",function(){//(12)新数据集,随机数组var numValues=dataset.length;dataset=[];var maxValue=75;var newNumber;for(var i=0;i<numValues;i++){newNumber=Math.floor(Math.random()*maxValue);//0-24的整数dataset.push(newNumber);}//(13)更新比例尺，免使纵坐标超出范围yScale.domain([0,d3.max(dataset)]);//只要更新定义域就行了，映射到的值域不变//更新所有的矩形svg.selectAll("rect").data(dataset).transition()//(9)加上过渡动画 .delay(function(d,i){return i/dataset.length*1000;})//指定过度什么时间开始，可以用函数控制每一条的动画时间，这样就可得到钢琴版的效果.duration(2000)//(10)加上动画的持续时间，以毫秒计算.ease("linear")//(11)缓动函数：有circle（加速）elastic（伸缩），linear（匀速），bounce（弹跳）.attr("y",function(d){return h-yScale(d);}).attr("height",function(d){return yScale(d);});//(8)更新条上的数值svg.selectAll("text") .data(dataset) .text(function(d) { return d; }) .attr("text-anchor", "middle") .attr("x", function(d, i) { return xScale(i)+xScale.rangeBand()/2; }) .attr("y", function(d) { return h - yScale(d) + 14; }) .attr("font-family", "sans-serif") .attr("font-size", "12px") .attr("fill", "red");});</script></body></html>