前端数据可视化D3 ——（案例2）含动画效果柱状图

本篇博客为案例1的升级版，加入了坐标轴以及动画。

 

查看本篇博客代码前，请先熟悉D3基础，详细请查看官网：

https://d3js.org/

话不多说，我们开始吧~

---

首先我们来看下实现的简单柱状图的样子：

 

对柱状图进行简单分析：

1.需要x方向坐标轴，y方向坐标轴

2.x方向坐标轴的标尺由自定义字符串组成

3.柱体由数据驱动显示，并且有过渡动画（从无到有）

4.每个柱体上方显示有对应数字

 

接下来是整个代码实现（由于这个案例代码比较简单，所以没有采用功能化函数分块实现），相关注释已经附上。

 

---

有问题欢迎指出~