D3学习总结(2)

最新推荐文章于 2024-07-18 10:23:58 发布

避于核桃之内自誉为无疆限之君主

最新推荐文章于 2024-07-18 10:23:58 发布

阅读量133

点赞数

分类专栏：前端-三方

本文链接：https://blog.csdn.net/shenqikai0319/article/details/88637843

版权

前端-三方专栏收录该内容

8 篇文章 0 订阅

订阅专栏

简单dome 1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script src="js/d3.js" charset="utf-8"></script>
		<script>
        //向body中添加svg元素并生成d3对象
			var svg = d3.select('body').append('svg').attr('width',300).attr('height',300);
			var dataset = [250,210,170,130,90];
			var recHeght = 25;

			svg.selectAll('svg')
			.data(dataset)
			.enter()  //指定选择集的enter部分
			.append('rect')
			.attr('x',20)
			.attr('y',function(d,i){
				return i*recHeght;
			})
			.attr('width',function(d){
				return d	
			})
			.attr('height',recHeght-2)
			.attr('fill','steelbue')
		</script>
	</body>
</html>

简单dome 2

d3.selectAll("p")   //选中对应的标签
  .data([4, 8, 15, 16, 23, 42])  //数据处理
  .enter()           //数据操作后必须添加
  .append("p")       //元素后插入p元素
  .text(function(d) { return "I’m number " + d + "!"; });  //根据data中的数据设置值