d3js比例尺

最新推荐文章于 2021-09-22 16:29:17 发布

hb707934728

最新推荐文章于 2021-09-22 16:29:17 发布

阅读量797

点赞数

分类专栏：数据可视化之D3.js_学习笔记

本文链接：https://blog.csdn.net/hb707934728/article/details/56839147

版权

数据可视化之D3.js_学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

<html>  
<head>  
	<meta charset="utf-8">  
	<title>给柱形图添加比例尺</title>  
</head>

<body>  

	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
	<script>
		var width=300;//画布的宽度
		var height=300;//画布的高度
		
		var svg=d3.select("body")	//选择文档中的body元素
				.append("svg")//添加一个svg元素
				.attr("width",width) //设定宽度
				.attr("height",height) //设定高度
				
		var dataset=[2.5,2.1,1.7,1.3,0.9];
		var linear=d3.scale.linear()//定义一个线性比例尺
									.domain([0,d3.max(dataset)])
				.range([0,300]);//dataset中最小的值映射成0，最大的值映射成250
		
		var rectHeight=25;//每个矩形所占的像素高度
		
		svg.selectAll("rect")
			  .data(dataset)
				.enter()
			  .append("rect")
			  .attr("x",20)
			.attr("y",function(d,i){
					return i*rectHeight;
				})
			.attr("width",function(d){
					return linear(d);
			})
			 .attr("height",rectHeight-2)
			 .attr("fill","steelblue")
		


	</script>  

</body>  
</html>

演示地址：http://runjs.cn/detail/oaj1pnql

hb707934728

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
d3js比例尺

给柱形图添加比例尺 var width=300;//画布的宽度 var height=300;//画布的高度 var svg=d3.select("body") //选择文档中的body元素 .append("svg")//添加一个svg元素 .attr("width",width) //设定宽度 .attr("height",
复制链接

扫一扫

专栏目录