在d3.js中一般的绘图是基于svg的,但是d3.js也可以绘制在canvas上,d3.js中的很多方法都有一个context方法,可以将上下文环境替换成canvas。先来看个案例:

读取文件

上面的demo中用了d3.tsv读取文件,文件是.tsv格式,tsv是用tab作为分割符的一个存储文本格式,例如:

第一行相当于key,下面的都是对应的value了,与之对应的还有一种.csv格式文件,用的是逗号分割的:

d3.tsv读取到的内容格式如下:

会自动将每一行的内容和它们的key组合在一起。对于里面的时间(例如“24-Apr-07”),先用d3.timeParse("%d-%b-%y")将字符串变成Date对象,可能用到的符号有以下几种:

注意还有一个d3.timeFormat方法,这个方法是将Date对象格式化的,d3.timeParse是将字符串变成Date对象。

line.context

主要可以替换成canvas用的就是context方法,将context替换成canvas后,再设置canvas的绘制属性就好了,关键代码如下:

绘制坐标轴

坐标轴没有context方法,因此需要自己额外绘制。设置ticks,然后设置tickFormat,利用canvas的moveTo,lineTo绘制出坐标轴。

timeScale的tickFromat和上面讲到的日期格式化字符一样;scaleLinear的tickFormat里面都是数字,因此涉及到另外一种格式化:数字的格式化:

上面的demo中包含一些常见数字的格式化。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字