d3Decembercafe学习代码(二）比例尺和坐标轴

最新推荐文章于 2020-06-16 03:14:10 发布

7TribeZ

最新推荐文章于 2020-06-16 03:14:10 发布

阅读量170

点赞数

分类专栏：可视化设计

本文链接：https://blog.csdn.net/wildand/article/details/90244128

版权

可视化设计专栏收录该内容

12 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hello World</title>
	<style type="text/css">
		.axis path,
		.axis line{
			fill: none;
			stroke:black;
			shape-rendering: crispEdges;

		}
		.axis text{
			font-family: sans-serif;
			font-size: 11px;
		}
	</style>
</head>
<body>
	<p class="myclass">hello world</p>
	<p id="myid">hello people</p>
	<p class="myclass">helloworld</p>
	<script src="js/d3.v3.min.js" charset="UTF-8"></script>
<!-- 	第六课比例尺的使用 -->
<!-- 	<script>
		//线性比例尺
		var dataset=[1.2,2.4,0.6,0.3,0.90];
		var min =d3.min(dataset);
		var max=d3.max(dataset);
		alert(max);alert(min);

		var linear =d3.scale.linear()
		.domain([min,max])
		.range([0,300]);

		alert(linear(0.3));
		alert(linear(2.0));
		alert(linear(2.4));

		//序数比例尺
		var index=[0,1,2,3,4];
		var color=["red","blue","green","yellow",'black'];

		var ordinal=d3.scale.ordinal()
		.domain	(index	)
		.range(color);


		var p=d3.select('body')
		.selectAll('p')
		.text(ordinal(0));


		var width = 300;  //画布的宽度
		var height = 300;

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

		//使用线性比例尺来画柱状图
		var dataset=[1.2,2.4,0.6,0.3,0.90];

		var linear=d3.scale.linear()
		.domain([0,d3.max(dataset)])
		.range([0,250]);

		var rectwidth=25;


		svg.selectAll('rect')
		.data(dataset)
		.enter()
		.append('rect')
		.attr('x',function(d,i)
		{
			return i*rectwidth;
		})
		.attr('y',function (d,i) {
			return 300-linear(d);
		})
		.attr('width',rectwidth-2)
		.attr('height',function(d,i)
		{
			return linear(d);
		})
		.attr('fill','steelblue');
	</script>
 -->
<!-- 		第七课坐标轴 -->
	<script>
		var width = 300;  //画布的宽度
		var height = 300;

		var svg=d3.select('body')
		.append('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,250]);

		var axis=d3.svg.axis()
		.scale(linear)
		.orient("bottom")
		.ticks(5);
		//这个ticks有点东西的，其实也就是关于除数只能是1，2，5及其10的倍数这么一个条件限制。建议去看一下另一篇博客学习一下

		svg.append('g')
		.attr("class","axis")
		.attr("transform","translate(20,130)")
		.call (axis);
	</script>


</body>
</html>

7TribeZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
d3Decembercafe学习代码(二）比例尺和坐标轴

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hello World</title> <style type="text/css"> .axis path, .axis line{ fill: non...
复制链接

扫一扫

专栏目录