使用D3 画出一个带坐标轴的柱形图

最新推荐文章于 2022-09-17 15:15:14 发布

Tong XU

最新推荐文章于 2022-09-17 15:15:14 发布

阅读量385

点赞数

分类专栏： d3

本文链接：https://blog.csdn.net/qq_41700374/article/details/102679712

版权

d3 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>TEST-3</title>

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

	</head>
	<body>

		<script>
			
			let dataset = [30, 20, 45, 12, 21];
			
			let svg = d3.select("body").append("svg").attr("width", 1200).attr("height", 1200);
				
			let xScale = d3.scale.linear()
						.domain([0, d3.max(dataset)])
						.range([0, 500]);
			
			let axis = d3.svg.axis()
						.scale(xScale)
						.orient("bottom");
						
			svg.append("g").attr("transform", "translate(10, 160)").call(axis);
			
			svg.selectAll("rect").data(dataset)
				.enter().append("rect")
				.attr("x", 10)
				.attr("y", function(d,i){
					return i * 30;
				})
				.attr("width", function(d,i){
					return d * 10
				})
				.attr("height", 28)
				.attr("fill", "red");
			
		</script>

	</body>

</html>