D3.js的v5版本入门教程(第六章)
从这一章开始,进入正式的d3,js绘图阶段,有了前面几章基本知识的积累,这样看接下来的绘图代码才不会觉得比较辛苦
做一个简单的图表
为了做一个简单的图表,我们还是需要以下新的知识点
- svg画布:svg绘制的是矢量图(还有canvas画布,这个是JavaScript用来绘制2D图像的,是位图)
- rect元素:是d3中在svg中绘制矩形的元素
- g元素:分组的时候使用
有了这些知识后,我们开始绘制
1、数据准备
var marge = {top:60,bottom:60,left:60,right:60}//设置边距
var dataset = [ 250 , 210 , 170 , 130 , 90 ]; //数据(表示矩形的宽度)
2、得到svg画布,并创建分组
var svg = d3.select("svg");//得到svg画布