学习D3 ——创建一个完整的柱形图

学习D3 ——创建一个完整的柱形图
创建一个完整柱形图的基本步骤：

1.定义数据



2.创建svg画布



3.定义比例尺



注意x轴比例尺与y轴比例尺的值域的取值，y高度的比例尺反过来映射，比较好表示矩形的高度。
4.定义坐标轴



5.添加坐标轴



//注意，其中用到了svg的transform属性
attr("transform", "translate(a,b) " )即将坐标轴平移，向右移a，向下移b。
6.定义矩形



7.定义文本标注



8.最后，CSS样式
坐标轴类axis是由path，line和text组成的。路径和线条可以共用相同的规则，而文本有字体和字号设置。
本文myText类，设置text-anchor: middle;可以使文本标签居中显示。
在head中



得到的柱形图如下：