d3Decembercafe学习代码(一）选择，绑定，用d3绘制一个柱状图

最新推荐文章于 2019-05-15 20:22:23 发布

7TribeZ

最新推荐文章于 2019-05-15 20:22:23 发布

阅读量184

点赞数

分类专栏：可视化设计

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

版权

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

12 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hello World</title>
</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>
		
		d3.select("body").selectAll('p').text("www.dece.org");

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

		p.style("color","red")
		.style('font-size',"72px");

		var str="china";
		var body=d3.select('body');
		var p2=body.selectAll('p');
		p2.datum(str);
		p.text(function (d,i) {
			return "第"+i+"个元素绑定的数据是"+d;
			// body...
		})

		var dataset=["I like dog","I like cats",'I like snakes'];
		p2.data(dataset)
		.text(function (d,i) {
			return "第"+i+"个元素绑定的数据是"+d;
		})
	</script> -->
<!-- 	第四课 选择插入和删除元素 -->
<!-- 	<script>
		var p=d3.select('body').select('#myid');
		p.style("color","red");

		var p2=d3.select('body').selectAll('.myclass');
		p2.style("color","blue");

		d3.select('body')
		.append('p')
		.text('append a element');

		d3.select('body')
		.insert('p','#myid')
		.text('insert a element');

		d3.select('body')
		.select('#myid')
		.remove();
	</script> -->
	<!-- 第五课做一个简单的图表 -->
	<script>
		var width = 300;  //画布的宽度
		var height = 300;

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

		var dataset=[250,210,170,130,90];

		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-d;
		})
		.attr('width',rectwidth-2)
		.attr('height',function(d,i)
		{
			return d;
		})
		.attr('fill','steelblue');

	</script>
	



</body>
</html>

7TribeZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
d3Decembercafe学习代码(一）选择，绑定，用d3绘制一个柱状图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hello World</title></head><body> <p class="myclass">hello world</p&...
复制链接

扫一扫

专栏目录