Question

我在下面制作了这张图，当用户单击动画开始但它仍然起作用时，我要做的是当用户再次单击动画时将重置并重新开始，我当时正在考虑使用jquery切换功能，但是它没有用，所以我离开了它，如果有人可以在这里应用我的重置功能，那将非常感激

<html>
<head>
	
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
	<title>Sol LeWitt  86</title>
	<style type="text/css">
		body {
			margin: 0;
		}
		.drawing {
			margin: 0;
		}
		#lines {
			width:100%;
			height: 100%;
		}
		line {
		  stroke: #111;
		  stroke-width: 1;
		}
	</style>
</head>
<body>

<div class="drawing">
	<div id="lines"></div>
</div>



<script>

function sol86() {
	var svg = d3.select('#lines')
		.append('svg')
		.attr("width", "100%")
		.attr("height", "100%");
	

	
	function lineData() {
		function getRandomArbitrary(min, max) {
		  return Math.random() * (max - min) + min;
		}
		var data = new Array();
		var id = 1;	
		var ww = window.innerWidth; // Width of the window viewing area
		var wh = window.innerHeight; // Height of the window viewing area
		// iterate for cells/columns inside rows
			for (var line = 0; line < 50; line++) {  // 1000 lines
				var x1 = getRandomArbitrary(-50, ww); // initial points can start 100px off the screen to make even distribution work
				var y1 = getRandomArbitrary(-50, wh);		
					data.push({
					id: id, // For identification and debugging
					x1: x1,
					y1: y1,
					x2: x1 + 50, // Move 100 to the right
					y2: y1 + 50, // Move 100 up
					rotate: getRandomArbitrary(0, 360) // Pick a random angle between 0 and 360
				})
				id++; 
			}
		return data;
	} 
	
	var lineData = lineData();
	console.log(lineData);
	
	
	var line = svg.selectAll("line")
		.data(lineData)
		.enter().append('line')
		.attr("id", function(d) { return d.id; })
		.attr("x1", function(d) { return d.x1; })
		.attr("y1", function(d) { return d.y1; })
		.attr("transform", function(d) { return "rotate(" + d.rotate + " " + (d.x1 + 25) + " " + (d.y1 + 25) + ")";})
		.attr("x2", function(d) { return d.x1; })
		.attr("y2", function(d) { return d.y1; }).transition().delay(function(d,i){ return 1.5*i; }).duration(750)
		.attr("x2", function(d) { return d.x2; })
		.attr("y2", function(d) { return d.y2; });
}

 // run on load

$(document).ready(function(event){
    $(window).one("click", function(event){
    sol86();
    });
});



$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

//resize on resizeEnd function
$(window).bind('resizeEnd', function() {
	 d3.selectAll("svg").remove();
	 sol86();
});

</script>

Answer 1

如果您指的是相同的动画，则此代码需要更新

<html>
<head>
	
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
	<title>Sol LeWitt  86</title>
	<style type="text/css">
		body {
			margin: 0;
		}
		.drawing {
			margin: 0;
		}
		#lines {
			width:100%;
			height: 100%;
		}
		line {
		  stroke: #111;
		  stroke-width: 1;
		}
	</style>
</head>
<body>

<div class="drawing">
	<div id="lines"></div>
</div>



<script>

function sol86() {
	var svg = d3.select('#lines')
		.append('svg')
		.attr("width", "100%")
		.attr("height", "100%");
	

	
	function lineData() {
		function getRandomArbitrary(min, max) {
		  return Math.random() * (max - min) + min;
		}
		var data = new Array();
		var id = 1;	
		var ww = window.innerWidth; // Width of the window viewing area
		var wh = window.innerHeight; // Height of the window viewing area
		// iterate for cells/columns inside rows
			for (var line = 0; line < 50; line++) {  // 1000 lines
				var x1 = getRandomArbitrary(-50, ww); // initial points can start 100px off the screen to make even distribution work
				var y1 = getRandomArbitrary(-50, wh);		
					data.push({
					id: id, // For identification and debugging
					x1: x1,
					y1: y1,
					x2: x1 + 50, // Move 100 to the right
					y2: y1 + 50, // Move 100 up
					rotate: getRandomArbitrary(0, 360) // Pick a random angle between 0 and 360
				})
				id++; 
			}
		return data;
	} 
	
	var lineData = lineData();
	console.log(lineData);
	
	
	var line = svg.selectAll("line")
		.data(lineData)
		.enter().append('line')
		.attr("id", function(d) { return d.id; })
		.attr("x1", function(d) { return d.x1; })
		.attr("y1", function(d) { return d.y1; })
		.attr("transform", function(d) { return "rotate(" + d.rotate + " " + (d.x1 + 25) + " " + (d.y1 + 25) + ")";})
		.attr("x2", function(d) { return d.x1; })
		.attr("y2", function(d) { return d.y1; }).transition().delay(function(d,i){ return 1.5*i; }).duration(750)
		.attr("x2", function(d) { return d.x2; })
		.attr("y2", function(d) { return d.y2; });
}

 // run on load

$(document).ready(function(event){
    $(window).on("click", function(event){
    d3.selectAll("svg").remove();
	 sol86();
    });
});



$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

//resize on resizeEnd function
$(window).bind('resizeEnd', function() {
	 d3.selectAll("svg").remove();
	 sol86();
});

</script>

在javascript中重置动画

1 个答案: