将事件侦听器添加到 html 绘图
adding eventlistner to an html drawing
所以我需要一些快速帮助,下面是我的简单 html 绘图代码,如您所见,当屏幕加载时绘图会自动启动,相反我想添加一个事件侦听器,它将允许用户当他点击屏幕时动画开始,当他再次点击时动画停止,等等
我得到了逻辑,但我无法正确实现语法,所以我在代码片段下方添加了供大家查看。
任何类型的建议或帮助将不胜感激!
<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>
只需删除加载时对函数的调用:
// run on load
sol86();
并添加此事件:
window.onclick = function(event) {
sol86();
}
或(Jquery样式)
$(window).click(function(event) {
sol86();
});
所以我需要一些快速帮助,下面是我的简单 html 绘图代码,如您所见,当屏幕加载时绘图会自动启动,相反我想添加一个事件侦听器,它将允许用户当他点击屏幕时动画开始,当他再次点击时动画停止,等等 我得到了逻辑,但我无法正确实现语法,所以我在代码片段下方添加了供大家查看。 任何类型的建议或帮助将不胜感激!
<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>
只需删除加载时对函数的调用:
// run on load
sol86();
并添加此事件:
window.onclick = function(event) {
sol86();
}
或(Jquery样式)
$(window).click(function(event) {
sol86();
});