D3.js学习05_比例尺

最新推荐文章于 2021-02-15 17:47:04 发布

半盒果酱

最新推荐文章于 2021-02-15 17:47:04 发布

阅读量830

点赞数

分类专栏： D3.js

本文链接：https://blog.csdn.net/flora_zhl/article/details/51702382

版权

D3.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

学习参考：【 D3.js 入门系列 — 4 】比例尺的使用

比例尺：d3.scale

线性比例尺：d3.scale.linear()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<strong><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></strong>
<title>比例尺</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>

<body>
<script >

	var dataSource=[10,100,30,50,130];
	
	var linear=<strong>d3.scale.linear()//</strong>获得线性比例尺
				.<strong>domain</strong>([0,d3.max(dataSource)])//设置定义域
				.<strong>range</strong>([0,100]);//设置值域

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

	var padding=10;
	var baseHight=30;
	var margin=5;
	svg.selectAll("rect")
		.data(dataSource)
		.enter()
		.append("rect")
		.attr("x",padding)
		.attr("y",function(d,i){
					return i*(baseHight+margin);	   
						   })
		.attr("width",function(d){
							   return linear(d);//比例尺使用
							   })
		.attr("height",baseHight)
		.attr("fill",function(d){
							  if(linear(d)>50)return "red";
							  else return "blue";
							  });

</script>
</body>
</html>

序数比例尺：d3.scale.ordinal()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>比例尺</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>

<body>
<script >
	var dataSource=[10,100,30,50,130];
	
	var linear=d3.scale.linear()//获得线性比例尺
				.domain([0,d3.max(dataSource)])//设置定义域
				.range([0,100]);//设置值域

	<strong>var source=[1,2,3];
	var show=["yellow","green","red"];
	var ordinal=d3.scale.ordinal()
 				.domain(source)
				.range(show);</strong>
				
	var svg=d3.select("body")
				.append("svg")
				.attr("width",400)
				.attr("height",300);
	var padding=10;
	var baseHight=30;
	var margin=5;
	svg.selectAll("rect")
		.data(dataSource)
		.enter()
		.append("rect")
		.attr("x",padding)
		.attr("y",function(d,i){
					return i*(baseHight+margin);	   
						   })
		.attr("width",function(d){
							   return linear(d);
							   })
		.attr("height",baseHight)
		.attr("fill",function(d){
							  <strong>if(linear(d)<30)return ordinal(1);
							  else if(linear(d)<60)return ordinal(2);
							  else return ordinal(3);</strong>
							  });
		
	
</script>
</body>
</html>

半盒果酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3.js学习05_比例尺

学习参考：【 D3.js 入门系列 — 4 】比例尺的使用比例尺：d3.scale线性比例尺：d3.scale.linear()比例尺 var dataSource=[10,100,30,50,130]; var linear=d3.scale.linear()//获得线性比例尺 .domain([0,d3.max(dataSource)])//设
复制链接

扫一扫