D3.js添加了过渡效果的柱形图

最新推荐文章于 2020-09-11 14:12:25 发布

理想主义文艺青年

最新推荐文章于 2020-09-11 14:12:25 发布

阅读量3.1k

点赞数 1

分类专栏：数据可视化D3.js

本文链接：https://blog.csdn.net/u011699990/article/details/52820468

版权

数据可视化D3.js 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

通过过渡效果使柱形和文字渐渐升到应该到的位置并弹几次

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN" xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>动态柱形图</title>
</head>
	
<style>
.axis path,
.axis line{
	fill:none;
	stroke:black;
	shape-rendering:crispEdges;
}
.axis text {
	font-family: sans-serif;
	font-size: 11px;
}
.MyRect {
	fill: steelblue;
}
.MyText {
	fill: white;
}



</style>


<body>

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
<script>

var width=500;
var height=500;
var dataset=[10, 20, 30, 40, 33, 24, 12, 5];
console.log("dataset: "+dataset);
var padding={left:20, right:20, top:20, bottom:20};
var svg=d3.select("body")
			.append("svg")
			.attr("width",width)
			.attr("height",height);
	//x轴的比例尺
	var xScale = d3.scale.ordinal()
		.domain(d3.range(dataset.length))
		.rangeRoundBands([0, width - padding.left - padding.right]);

	//y轴的比例尺
	var yScale = d3.scale.linear()
		.domain([0,d3.max(dataset)])
		.range([height - padding.top - padding.bottom, 0]);

	//定义x轴
	var xAxis = d3.svg.axis()
		.scale(xScale)
		.orient("bottom");
		
	//定义y轴
	var yAxis = d3.svg.axis()
		.scale(yScale)
		.orient("left");

	//矩形之间的空白
	var rectPadding = 4;

	//定义矩形元素
	var rects=svg.selectAll(".MyRect")
				.data(dataset)
				.enter()
				.append("rect")
				.attr("class","MyRect")
				.attr("transform","translate("+padding.left+","+padding.top+")")
				.attr("x",function(d,i){
					return xScale(i)+rectPadding/2;
				})
				// .attr("y",function(d){
				// 	var min=yScale.domain()[0];
				// 	console.log("min: "+min);
				// 	return yScale(min);
				// })
				.attr("y",function(d){
					// var min=yScale.domain()[0];
					return yScale(0);
				})
				.attr("width",xScale.rangeBand()-rectPadding)
				.attr("height",function(d){
					return 0;
				})
				.transition()
				.delay(function(d,i){
					return i*200;
				})
				.duration(2000)
				.ease("bounce")//设定过渡样式
				.attr("y",function(d){
					return yScale(d);
				})
				.attr("height",function(d){
					return height-padding.top-padding.bottom-yScale(d);
				});
	//添加文字元素
	var tests=svg.selectAll(".MyText")
				.data(dataset)
				.enter()
				.append("text")
				.attr("class","MyText")
				.attr("transform","translate("+padding.left+","+padding.top+")")
				.attr("x",function(d,i){
					return xScale(i)+rectPadding/2;
				})
				.attr("dx",function(){
					return (xScale.rangeBand()-rectPadding)/2;
				})
				.attr("dy",function(d){
					return 20;
				})
				.text(function(d){
					return d;
				})
				// .attr("y",function(d){
				// 	var min=yScale.domain()[0];
				// 	return yScale(min);
				// })
				.attr("y",function(d){
					// var min=yScale.domain()[0];
					return yScale(0);
				})
				.transition()
				.delay(function(d,i){
					return i*200;
				})
				.duration(2000)
				.ease("bounce")
				.attr("y",function(d){
					return yScale(d);
				});

	//添加x轴
	svg.append("g")
		.attr("class","axis")
		.attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
		.call(xAxis); 
		
	//添加y轴
	svg.append("g")
		.attr("class","axis")
		.attr("transform","translate(" + padding.left + "," + padding.top + ")")
		.call(yAxis);

</script>


</body>
</html>