d3的面积图

最新推荐文章于 2024-05-11 17:33:22 发布

原创最新推荐文章于 2024-05-11 17:33:22 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#d3

Javascript 专栏收录该内容

49 篇文章

订阅专栏

这篇博客主要介绍了如何使用d3.js库来创建面积图。内容涵盖了面积图的基础概念，包括path元素的使用，DOM选择，数据绑定以及尺度映射等。文章中提到的数据集包含时间戳和对应数值，通过interpolate插值方式来平滑图形。xscale和yscale分别用于时间数据和数值数据的坐标轴映射。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用来整理思路的，暂时还不成一个完整的例子

面积图首先是一个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;