Добавление eventlistner в чертеж HTML

Поэтому мне нужна небольшая помощь, ниже приведен мой код для простого рисования 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>

Источник

1 ответ

Решение

Просто удалите вызов вашей функции при загрузке:

// run on load
sol86();

и добавьте это событие:

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

или (стиль Jquery)

$(window).click(function(event) {
    sol86();
});
Источник
Другие вопросы по тегам