so i need some quick help , below is my code for a simple html drawing , as you can see when the screen loads the drawngs starts automatically , instead i want to add an event listener , whcih will allow the user that when he clicks on the screen the animation will begin , and when he clicks again it will stop , etc I got the logic but i have not been able to implement the syntax properly so i have added below the code snippet for you people to review. Any kind of suggestion or help would be appreciated!
<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>
