Question

所以我需要一些快速帮助，以下是我的简单html绘图代码，如您所见，当屏幕加载drawgs时，它会自动开始，而我想添加一个事件侦听器，这将允许用户在单击屏幕上的动画将开始，当他再次单击时动画将停止，依此类推。我知道了逻辑，但是我无法正确实现语法，因此我在代码段下方添加了供您查看的代码。任何建议或帮助将不胜感激！

<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 < 10000; 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
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

只需在加载时删除对函数的调用即可

// run on load
sol86();

并添加此事件：

window.onclick = function(event) {
    sol86();
}

或（jQuery风格）

$(window).click(function(event) {
    sol86();
});

将eventlistner添加到html绘图

1 个答案: