D3 数据可视化的简单例子

置顶清澈@Cherry

于 2017-01-16 09:47:40 发布

阅读量4.6k

点赞数 1

分类专栏： JavaWeb 文章标签：数据可视化 d3 d3.js

本文链接：https://blog.csdn.net/nihaoqiulinhe/article/details/54571337

版权

JavaWeb 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

D3.js可以很好地展示数据，并绘制成各种表格，一个简单例子如下：

<html>  
<head>  
	<meta charset="utf-8">  
	<title>做一个简单的图表</title>  
</head> 
<body>  
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
<script>
	
	var width = 300;	//画布的宽度
	var height = 300;	//画布的高度


	var svg = d3.select("body")				//选择文档中的body元素
				.append("svg")				//添加一个svg元素
				.attr("width", width)		//设定宽度
				.attr("height", height);	//设定高度
	
	var dataset = [ 250 , 210 , 170 , 130 , 90 ];
	
	var rectHeight = 25;	//每个矩形所占的像素高度(包括空白)


	svg.selectAll("rect")
		  .data(dataset)
		  .enter()
		  .append("rect")
		  .attr("x",40)
		  .attr("y",function(d,i){
				return i * rectHeight;
		  })
		  .attr("width",function(d,i){
		  	if(i==2){
		  		return 20;
		  	}
		  	
		   		return d;
		  })
		  .attr("height",rectHeight-2)
		  .attr("fill","steelblue");
	   
</script>  
	
</body>  
</html>

结果为：