html 荡漾的圈子

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 荡漾的圈子相关的知识，希望对你有一定的参考价值。

sup{
  vertical-align: top;
  font-size: 0.8rem;
}

body{
  font-family:sans-serif;
}

.column{
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width:800px;
}

img{
  width:100%;
  padding-top:1rem;
  padding-bottom:1rem;
}

.note img{
  display:block;
  width:30%;
}

h2{
  font-size:1.3rem;
}

blockquote{
  font-family:serif;
}

.date{
  border-top:1px solid #999;
  color:#999;
  padding-bottom:10px;
  padding-top:10px;
}

.content{
  max-width:600px;
  line-height:1.5rem;
  font-size:1.1rem;
}

.note{
  max-width:600px;
  font-size:0.8rem;
  line-height:1.2rem;
}

#ripples

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ripples</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

	<link rel="stylesheet" type="text/css" href="style.css">
	<style>

	</style>

</head>
<body>
	<div class="content">
	</div>
</body>
<script>


	function getData(t){
		function normalize(a){
			var total = d3.sum(a);
			return a.map(function(d){
				return d/total;
			});
		}

		return d3.range(20)
			.map(function(d,i){
				var i = i+t;
				return {
					probabilities:normalize([
										(Math.sin(i/10)),
										(Math.sin((i+1)/20)),
										(Math.sin((i+2)/30)),
										(Math.sin((i+3)/40)),
										(Math.sin((i+4)/50)),
										(Math.sin((i+5)/60)),
										(Math.sin((i+6)/10)) ])
				}
			});
	}


	


	var height = 400, width = 800, margin = { top:30 ,left:30, bottom:30 ,right:30 }
	
	var svg = d3.select('.content').append('svg')
		.attr({ height:height, width:width })
		.append('g')
		.attr('transform','translate('+margin.left+','+margin.top+')')

	function column(d,i){
		var parent = d3.select(this);

		var yScale = d3.scale.linear()
			.domain([0,6])
			.range([0, height-(margin.top+margin.bottom)]);

		var arc = d3.svg.arc()
			.innerRadius(0)
			.outerRadius(20)
			.startAngle(0)
			.endAngle(function(d,i){
				console.log(d,i);
				return 2 * Math.PI * d;
			});

		parent.selectAll('g')
			.data(d.probabilities)
				.enter()
			.append('g')
				.attr({
					'transform':function(d,i){ return 'translate(0,' + yScale(i) + ')'}
				})
			.append('path');
				
		parent.selectAll('g').select('path').attr('d',arc);
	}

	var count = 0;
	d3.timer(function(t,i){
		count++;
		var dates = getData(count/4);
		var xScale = d3.scale.linear().domain([0,dates.length]).range([0,width-(margin.left + margin.right)]);
		
		svg.selectAll('g.column')
			.data(dates)
				.enter()
			.append('g').attr({
				'class':'column',
				'transform':function(d,i){
					return 'translate('+xScale(i)+',0)'
				}
			})

		svg.selectAll('g.column')
			.each(column);

		var dates = getData(t);
		//return true;
	});

	d3.select(self.frameElement).style("height", d3.select('.content').node().getBoundingClientRect().height + "px");
</script>
</html>

以上是关于html 荡漾的圈子的主要内容，如果未能解决你的问题，请参考以下文章

花开半年，顺风荡漾

求ae做水滴入水后水波荡漾的效果。

《三叶虫与其他故事》我的恐惧如涟漪扩散，荡漾过百万年的时光

终于明白的我的心田为什么在荡漾中得以被温暖