表格如下
1.”画布”是什么?
如果你想作图,你需要一个画布
html5 privode two,one is canvas,another is svg
- svg
特点
1.svg绘制的是矢量图形,因此放大后不会失真
2.svg是基于xml的,可以为每个元素添加JavaScript事件
3.svg不适合游戏应用
4.每个图像都是一个对象,更改对象的属性,图形也会改变 - canvas
1、绘制的是位图,放大后会失真
2、不支持事件处理器
3、适合游戏开发
4、能够以png或者jpg格式保存图像
2.添加画布
推荐使用svg画布
//在body元素中添加svg画布代码
<script>
var height="300";
var width="300";
var svg=d3.select("body").append("svg");
svg.attr("height",height);
svg.attr("width",width);
</script>
3.绘制矩形
<script>
var height="300";
var width="300";
var dataset = [ 250 , 210 , 170 , 130 , 90 ];
var rectHeight=25;
var svg=d3.select("body").append("svg");
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",20)
.attr("y",function(d,i){
return i*rectHeight;
})
.attr("height",function(d,i){
return rectHeight-2;
})
.attr("width",function(d,i){
return d;
})
</script
//矩形的四个基本属性,x,y,width,height
//下面这几行代码务必记住
//选择svg中所有的rect元素,即使目前没有任何rect也可以
svg.selectAll("rect")
.data(dataset) //绑定数组
.enter() //指定选择集的enter部分
.append("rect") //添加足够数量的rect元素
有数据,但是没有足够的图形元素,可以使用上面的语句