SVG矢量图与位图

位图:一系列固定像素组成,每个像素有独立的颜色. 矢量图由线段和曲线定义

js执行前提条件,保证页面加载成功 window.onload=function(){} window.Navigator对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。

首先要了解一下两者的区别 Canvas

• 依赖分辨率
• 不支持事件处理器
• 弱文本渲染能力
• 可以保存最终图片为PNG或者JPG
• 最适合许多 对象频繁重画的图形游戏

SVG

• 独立于分辨率
• 支持事件处理器
• 最适合具有大渲染面积的应用（谷歌地图）
• 复杂图像，重画变慢（任何使用DOM很多的情况都会变慢）
• 不适合游戏应用

所以看你要要什么类型的东西canvas 相比操作更加复杂，因为不支持事件处理，svg 虽然方便操作，但是渲染慢，因为是操作 DOM

d3简单操作 选择集: select() selectAll()

• 省略第二个参数,默认返回当前状态的值
• 修改属性–>.attr(“id”,”id”); key,value
• 修改类 –>.classed(“good”,false); key,if
• 修改style–>.style(“font-size”,”20px”) key,value
• 修改property–>.property(“name”,”456”) 凡是不能用attr添加的使用property()
• 修改text 同innerText
• 修改html 同innerHTML

对于选择集 增:

• append()–在末尾

插:

• insert(A[,B])在B的前面添加A

删除:

• remove()

绑定数据:

• datum([value]):每一个元素都绑定相同元素
• data([value[,key]]):每一个元素绑定key中每一个数据,一对一对应