D3.js的v5版本入门教程（第十章）
在这一章我们干点有趣的事——让我们上一章绘制的图表动起来，这样岂不是很有意思
为了让图表动起来，我们还是需要以下新的知识点
- .attr(xxx) .transition() .attr(xxx)，transition()表示添加过渡，也就是从前一个属性过渡到后一个属性
- .duration(2000)，表示过渡时间持续2秒
- .delay(500)，表示延迟0.4秒后再进行过渡
- .ease(d3.easeElasticInOut)表示过渡方式，注意这里和v3版本的区别
有了上面的基础知识后，现在我们来实现动态图表
1、为矩形添加过渡效果
gs.append("rect").attr("x",function(d,i){return xScale(i)+rectPadding/2;}) .attr("y",function(d){//这里是要改变的，即初始状态var min = yScale.domain()[0];return yScale(min);//可以得知，这里返回的是最大值}).attr("width",function(){return xScale.step()-rectPadding;}).attr("height",function(d){//这里要改变，即初始状态return 0;}).attr("fill","blue").transition()//添加过渡.duration(2000)//持续时间.delay(function(d,i){//延迟return i*400;})//.ease(d3.easeElasticInOut)//这里读者可以自己将注释去掉，看看效果（chrome浏览器会报错，但是不影响效果）.attr("y",function(d){//回到最终状态return yScale(d);}).attr("height",function(d){//回到最终状态return height-marge.top-marge.bottom-yScale(d);})代码说明：
-注意上面的注释即可
2、为文字添加过渡效果
gs.append("text").attr("x",function(d,i){return xScale(i)+rectPadding/2;}).attr("y",function(d){var min = yScale.domain()[0];return yScale(min);}).attr("dx",function(){(xScale.step()-rectPadding)/2;}).attr("dy",20).text(function(d){return d;}).transition().duration(2000).delay(function(d,i){return i*400;})//.ease(d3.easeElasticInOut).attr("y",function(d){return yScale(d);});代码说明：
-和矩形的类似
效果浏览：点击浏览效果
源码浏览：点击源码浏览
（翻外篇）d3.js在网页端可视化neo4j图数据库
为了让大家更好的学习d3.js，“d3.js在网页端可视化neo4j图数据库”这是一个比较综合的项目——利用neo4j的java驱动API从neo4j中取数据，并利用d3.js在网页端进行可视化。大家在学完基础课程后可以做一下这个项目，进行巩固。点击下面链接进行查看：d3.js可视化neo4j图数据库项目专栏