D3.js 完整的柱形图

最新推荐文章于 2022-11-30 17:59:50 发布

理想主义文艺青年

最新推荐文章于 2022-11-30 17:59:50 发布

阅读量861

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/u011699990/article/details/52802818

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

10 篇文章

订阅专栏

之前已经写过了一个柱形图但是那个并没有坐标轴

在这里来一个带坐标轴的柱形图

柱形图中 y轴可根据数据的值进行缩放按照一定的比例

<!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;
	}
	.axis text{
		font-family: sans-serif;
		font-size: 11px;
	}
	.MyRect{
		fill: steelblue;
	}
	.MyText{
		fill: white;
		text-anchor: middle;
	}
	</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=400;
	var height=400;
	var svg=d3.select("body")
				.append("svg")
				.attr("width",width)
				.attr("height",height);

	var padding={left:30, right:30, top:20, bottom:20};

	var dataset=[50,43,120,87,99,167,142];
	// var dataset=[10, 20, 30, 40, 33, 24, 12, 5];//柱形图显示的数据集

	//X轴比例尺
	var xScale=d3.scale.ordinal()
	 				.domain(d3.range(dataset.length))
	 				.rangeRoundBands([0,width-padding.left-padding.right]);

	 //y轴比例尺
	var yScale=d3.scale.linear()
	 				.domain([0,d3.max(dataset)])//定义域
	 				.range([height-padding.top-padding.bottom,0]);

	 //定义x轴
	var xAxis=d3.svg.axis()
	 				.scale(xScale)
	 				.orient("bottom");//坐标轴方向
	 //定义Y轴
	var yAxis=d3.svg.axis()
	 				.scale(yScale)
	 				.orient("left");

	 //矩形之间的空白
	var rectPadding=4;

	 //添加矩形元素
	var rects=svg.selectAll(".MyRect")
	 				.data(dataset)
	 				.enter()
	 				.append("rect")
	 				.attr("class","MyRect")
	 				.attr("transform","translate("+padding.left+","+padding.top+")")
	 				.attr("x",function(d,i){
	 					return xScale(i)+rectPadding/2;
	 				})
	 				.attr("y",function(d){
	 					return yScale(d);
	 				})
	 				.attr("width",xScale.rangeBand()-rectPadding)
	 				.attr("height",function(d){
	 					return height-padding.top-padding.bottom-yScale(d);
	 				});

	 //添加文字元素
	var texts=svg.selectAll(".MyText")
	 				.data(dataset)
	 				.enter()
	 				.append("text")
	 				.attr("class","MyText")
	 				.attr("transform","translate("+padding.left+","+padding.top+")")
	 				.attr("x",function(d,i){
	 					return xScale(i)+rectPadding/2;
	 				})
	 				.attr("y",function(d){
	 					return yScale(d);
	 				})
	 				.attr("dx",function(){
	 					return (xScale.rangeBand()-rectPadding)/2;
	 				})
	 				.attr("dy",function(d){
	 					return 20;
	 				})
	 				.text(function(d){
	 					return d;
	 				});

	//添加X轴
	svg.append("g")
		.attr("class","axis")
		.attr("transform","translate("+padding.left+","+(height-padding.bottom)+")")
		.call(xAxis);

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

	
	</script>

	</body>
</html>

效果图