d3.js 动态图表

d3js v5.9.2 使用d3创建动态图表主要使用到了d3.trasition部分的API，通过他们可以完成动画 我的学习记录是通过一个例子了解这些API会动的柱状图还是拿之前的例子，代码在此：完整的柱图 修改的代码部分在于创建rect处：//原来的代码barContainer.append(‘rect’) .attr(‘height’, d => barScale(d)) .attr(‘width’, barWidth - 1);加上动画效果后代码如下barContainer.append(‘rect’) .attr(‘height’, 0) //动画开始前状态 .attr(‘width’, barWidth - 1) .transition() //selection.transition() 返回transition .duration(1000)//持续时间 .ease(d3.easeBackInOut)//transition.ease(easing function)，easing function是d3的动画函数，还有很多其他api .attr(‘height’, d => barScale(d));//transition.attr()？？是从上向下绘制的这里我们可以用rect的y属性控制动画，y表示矩形左上角端点的纵坐标barContainer.append(‘rect’) .attr(‘height’, 0) .attr(‘width’, barWidth - 1) .attr(‘y’, d => barScale(d)) //y是相对rect父级的g容器的，顶端从底部开始，故值设为矩形的高 .transition() .duration(2000) .ease(d3.easeBackInOut) .attr(‘height’, d => barScale(d)) .attr(‘y’, 0);//到g容器顶部所以过程就是矩形长度向下拉伸，同时位置上移这样子就完成了动画更简洁的写法上面的写法是最简单的写法，但是代码太长或者同一个动画效果多次使用就会很冗杂，我们可通过d3.transition()获得自定义的transition 使用也很简单//定义transitionlet t = d3.transition() .duration(2000) .ease(d3.easeBackInOut);barContainer.append(‘rect’) .attr(‘height’, 0) .attr(‘width’, barWidth - 1) .attr(‘y’, d => barScale(d)) .transition(t) //使用新定义的transition .ease(d3.easeBackInOut) .attr(‘height’, d => barScale(d)) .attr(‘y’, 0);效果相同总结d3还提供了其他常用的API，除了用到的ease()，duration()还有delay()等等 代码在这（d3库在build里）参考资料第九章 让图表动起来 SVG 图像入门教程——阮一峰 selection.transition()