Javascript 将eventlistner添加到html图形

所以我需要一些快速的帮助，下面是我的代码，一个简单的html绘图，你可以看到当屏幕加载绘图自动开始，相反，我想添加一个事件侦听器，当用户点击屏幕时，动画将开始，当他再次点击时，动画将停止，等等 我得到了逻辑，但我无法正确地实现语法，所以我在下面添加了代码片段供大家查看。 任何建议或帮助都将不胜感激

索尔·勒维特86
身体{
保证金：0；
}
.图纸{
保证金：0；
}
#线条{
宽度：100%；
身高：100%；
}
线{
冲程：#111；
笔画宽度：1；
}
函数sol86（）{
var svg=d3。选择（“#行”）
.append（'svg'）
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）；
函数lineData（）{
函数GetRandomArbital（最小值、最大值）{
返回Math.random（）*（max-min）+min；
}
var data=新数组（）；
var-id=1；
var ww=window.innerWidth；//窗口查看区域的宽度
var wh=window.innerHeight；//窗口查看区域的高度
//迭代行内的单元格/列
对于（var line=0；line<10000；line++）{//1000行
var x1=getrandomArbital（-50，ww）；//初始点可以从屏幕上开始100px，以使均匀分布工作
变量y1=随机变量（-50，wh）；
数据推送({
id:id，//用于标识和调试
x1:x1，
y1:y1，
x2:x1+50，//向右移动100
y2:y1+50，//向上移动100
旋转：GetRandomArbital（0，360）//拾取0和360之间的随机角度
})
id++；
}
返回数据；
} 
var lineData=lineData（）；
console.log（lineData）；
var line=svg.selectAll（“行”）
.数据（线条数据）
.enter（）.append（'行'）
.attr（“id”，函数（d）{return d.id；}）
.attr（“x1”，函数（d）{返回d.x1；}）
.attr（“y1”，函数（d）{返回d.y1；}）
.attr（“转换”，函数（d）{return“旋转”（+d.rotate++++（d.x1+25）+++（d.y1+25）+”）；）
.attr（“x2”，函数（d）{返回d.x1；}）
.attr（“y2”，函数（d）{return d.y1；}）.transition（）.delay（函数（d，i）{return 1.5*i；}）.duration（750）
.attr（“x2”，函数（d）{返回d.x2；}）
.attr（“y2”，函数（d）{返回d.y2；}）；
}
//负载运行
sol86（）；
$（窗口）。调整大小（函数（）{
如果（this.resizeTO）clearTimeout（this.resizeTO）；
this.resizeTO=setTimeout（函数（）{
$（this.trigger（'resizeEnd'）；
}, 500);
});
//在resizeEnd函数上调整大小
$（window.bind（'resizeEnd'，function（））{
d3.选择全部（“svg”）.remove（）；
sol86（）；
});

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

// run on load
sol86();

并添加此事件：

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

或（Jquery风格）

---

这只会启动函数，但当您再次单击时，它会停止，但不会从停止的位置重新正确启动

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