D3.js画折线图

最新推荐文章于 2024-07-18 10:23:58 发布

理想主义文艺青年

最新推荐文章于 2024-07-18 10:23:58 发布

阅读量1.6w

点赞数 3

分类专栏：数据可视化D3.js

本文链接：https://blog.csdn.net/u011699990/article/details/52807696

版权

数据可视化D3.js 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

将中国和日本的GDP数据进行对比通过折线图可以看出增长趋势

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN" xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>折线图的制作</title>
</head>
	
<style>
	.axis path,
	.axis line{
		fill:none;
		stroke:black;
		shape-rendering:crispEdges;
	}
</style>


<body>
	<!-- // <script src="d3/d3.js" charset="utf-8"></script> -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
<script>

var width=500;
var height=500;

var dataset=[
	{
		country:"china",
		gdp:[[2000,11920],[2001,13170],[2002,14550],
			[2003,16500],[2004,19440],[2005,22870],
			[2006,27930],[2007,35040],[2008,45470],
			[2009,51050],[2010,59490],[2011,73140],
			[2012,83860],[2013,103550],]
	},
	{
		country:"japan",
		gdp:[[2000,47310],[2001,41590],[2002,39800],
			[2003,43020],[2004,46550],[2005,45710],
			[2006,43560],[2007,43560],[2008,48490],
			[2009,50350],[2010,54950],[2011,59050],
			[2012,59370],[2013,48980],]
	}
];

var padding={top:70, right:70, bottom: 70, left:70};
var gdpmax=0;
for(var i=0;i<dataset.length;i++){
	var currGdp=d3.max(dataset[i].gdp,function(d){
		return d[1];
	});
	if(currGdp>gdpmax)
		gdpmax=currGdp;
}
console.log(gdpmax);

var xScale=d3.scale.linear()
			.domain([2000,2013])
			.range([0,width-padding.left-padding.right]);

var yScale=d3.scale.linear()
			.domain([0,gdpmax*1.1])
			.range([height-padding.bottom-padding.top,0]);

var linePath=d3.svg.line()//创建一个直线生成器
				.x(function(d){
					return xScale(d[0]);
				})
				.y(function(d){
					return yScale(d[1]);
				})
				.interpolate("basis")//插值模式
				;

//定义两个颜色
var colors=[d3.rgb(0,0,255),d3.rgb(0,255,0)];

var svg=d3.select("body")
				.append("svg")
				.attr("width",width)
				.attr("height",height);

svg.selectAll("path")
	.data(dataset)
	.enter()
	.append("path")
	.attr("transform","translate("+padding.left+","+padding.top+")")
	.attr("d",function(d){
		return linePath(d.gdp);
		//返回线段生成器得到的路径
	})
	.attr("fill","none")
	.attr("stroke-width",3)
	.attr("stroke",function(d,i){
		return colors[i];
	});

var xAxis=d3.svg.axis()
			.scale(xScale)
			.ticks(5)
			.tickFormat(d3.format("d"))
			.orient("bottom");

var yAxis=d3.svg.axis()
			.scale(yScale)
			.orient("left");

//添加一个g用于放x轴
svg.append("g")
	.attr("class","axis")
	.attr("transform","translate("+padding.left+","+(height-padding.top)+")")
	.call(xAxis);

svg.append("g")
	.attr("class","axis")
	.attr("transform","translate("+padding.left+","+padding.top+")")
	.call(yAxis);

</script>

</body>
</html>

效果图

使用插值basis模式之后的折线图

理想主义文艺青年

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
D3.js画折线图

将中国和日本的GDP数据进行对比通过折线图可以看出增长趋势折线图的制作 .axis path, .axis line{ fill:none; stroke:black; shape-rendering:crispEdges; } --> var width=500;var height=500;var dataset=[ {
复制链接

扫一扫

专栏目录