将事件侦听器添加到 html 绘图

Question

所以我需要一些快速帮助，下面是我的简单 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>

Answer 1

只需删除加载时对函数的调用：

// run on load
sol86();

并添加此事件：

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

或（Jquery样式）

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

将事件侦听器添加到 html 绘图

adding eventlistner to an html drawing

html

javascript

animation

drawingcontext