【 D3.js 入门系列 --- 5.1 】 做一个带坐标轴和标签的图表

    本人的个人博客为： www.ourd3js.com 

    csdn博客为： blog.csdn.net/lzhlzz 

    转载请注明出处，谢谢。

---

    前面几节讲解了图标、坐标轴、比例等等，这一节整合这些内容做一个实用的图表。结果图如下：

    

    代码如下所示：

    下面分别讲解上面的代码：

• 31 - 34 行：  随机生成数据，赋于数组
• 36 - 38 行：  定义 svg 
• 40 - 54 行：  定义坐标轴的 scale （比例）和坐标轴，48行为 x 轴，52行为 y 轴
• 56 - 62 行：  定义柱形图的 scale
• 64 - 78 行：  绘制柱形图，注意 scale 的使用
• 80 - 98 行：  绘制文字标签，同样注意 scale 
• 100 - 108 行： 绘制坐标轴

    注意：绘制的时候，要注意绘制的顺序，否则可能会把某些需要的东西覆盖掉。尤其是坐标轴，最好放到最后绘制。