制作一个完整的柱状图
一个完整的柱状图应该是包含坐标轴、文字、矩形和标题等。在本篇文章中将从数据定义、定义画布和边框、坐标轴和比例尺的定义、矩形元素的属性设置、字体的大小等各个方面进行讲解。
定义数据集
首先,定义我们将要用于描绘的数据集合。每个数据由name和value组成
定义画布SVG
画布的定义需要从svg元素中提取出来d3.select("#mainsvg")
然后再定义其宽和高,注意两种定义的方法:一种是利用+号将字符串转成数值型,一种是直接赋值
定义margin
定义margin的时候需要指定4个属性:top、bottom、left、right。
定义两种比例尺
横轴是线性比例尺;纵轴是离散型的比例尺。注意两种比例尺的映射范围
定义分组元素g
定义两个坐标轴
坐标轴定义的时候需要将比例尺传进来。一个是向左,一个向下
设置矩形元素的属性
改变字体和设置标题
源码
1 | <!DOCTYPE html> |