D3

最新推荐文章于 2023-09-11 09:47:17 发布

霁夜游

最新推荐文章于 2023-09-11 09:47:17 发布

阅读量533

点赞数 1

分类专栏： d3 文章标签： D3

本文链接：https://blog.csdn.net/Xix52o/article/details/43305961

版权

d3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
		<meta charset="utf-8">
		<title>testD3-3-drawingDivBar</title>
		<script type="text/javascript" src="d3.js"></script>
	<style type="text/css">
			
			div.bar {
				display: inline-block;
				width: 20px;
				height: 75px;	/* Gets overriden by D3-assigned height below */
				padding-right: 4px;
				padding-left:4px;
				background-color: #143948;
				border-right:2px solid #666;
			}
			.fd{
				width:18px;
				height:5px;
				margin-top:2px;
				background-color: #2A7BB8;
			}
			div{
				background:#143948;
				width:350px; 
				text-align:center; 
			}
		</style>
	</head>
	<body>
		<div></div>

<circle cx="250" cy="25" r="25"/>

		<script type="text/javascript"> 
			var dataset = [ 5, 10, 15, 20, 25 ,35,2,3 ]; 
			var dataset2 = [ 3, 3, 4, 10, 15 ,25,13,13 ]; 

			var svg = d3.select("div").selectAll("div")
				.data(dataset)
				.enter()
				.append("div")
				.attr("class", "bar")
				.style("height", function(d) { 
					var barHeight = d * 7;
					return barHeight + "px";
				}).html(function(d){ 
					var htm = "<div class='fd'></div>";
					for(var i=1;i<d;i++){
						htm = htm +"<div class='fd'></div>";
					} 
					return htm;
				}).attr("font-color","#ccc"); 
              
		</script>
	</body>
</html>