用来整理思路的,暂时还不成一个完整的例子
面积图首先是一个path,所以有一下的代码
timeline.append("path")
.attr("d",timearea(dataset))
.style("fill",'#99b77b')
.style("stroke-width",0.7);
timeline是一个dom的选择,
var timeline=d3.select("#maincanvas")
.append("svg")
.attr("width",w)
.attr("height",timelineHeight);
是一个id为maincanvas下面一个叫svg的标签下面的东西,dataset是数据集,这个数据集是一个数组,里面有{data:“2013-2-4”,count:43}这样的数据
var timearea=d3.svg.area()
.interpolate(mode)
.x(function(d){
return xscale(new Date(d.date))
})
.y0(function(d){
return bottontimeline;
})
.y1(function(d){
return tyscale(d.count);
});
timearea是一个指定了面积图基本属性的一个变量,interpolate是插值方式,
xscale是d3的定义尺度,它相当于一个映射,把原始数据映射到坐标轴的像素。
y1,y0是面积图的上下高度。
var xscale=d3.time.scale()
.domain([new Date(dataset[0].date),new Date(dataset[dataset.length-1].date)])
.range(xrange);
var tyscale=d3.scale.linear()
.domain([0,ymax])
.range([bottontimeline,timelinetop]);
xscale是把时间映射到坐标轴,yscale是把数据映射到坐标轴 ,切记是[a,b]这样的格式,domain是原来的数据范围,range是坐标轴的数据范围。
var timelinetop=5;
var timelinebotton=20
var timelineHeight=80;
var bottontimeline=timelineHeight-timelinebotton;