Javascript 移动到SVG多路径中的鼠标单击（d3.js）

我需要在mousedown事件中创建一个圆并将其移动到SVG路径中最近的点

动画在一条路径中正常工作，但当添加其他路径时，圆停止移动

检查：

我试图在一个变量中创建路径，但它不起作用

守则：

var points=[[180300]、[234335]、[288310]、[350290]、[405300]、[430305]、[475310]、[513300]、[550280]；
var pointss=[[246333]、[300370]、[350400]；
var pointsss=[[400150]、[430305]、[500433]；
变量宽度=1000，高度=600；
var line=d3.svg.line（）.interpolate（“基数”）；
var svg=d3.select（“#Con”）.append（“svg”）.attr（“width”，width）.attr（“height”，height）.attr（“id”，“svgs”）；
var path=svg.append（“path”）.datum（points.attr（“d”，line）/+svg.append（“path”）.datum（pointss.attr（“d”，line）+svg.append（“path”）.datum（pointsss.attr（“d”，line）；
var line=svg.append（“line”）；
var circle=svg.append（“circle”）.attr（“cx”，-10）.attr（“cy”，-10）.attr（“r”，3.5）.attr（“id”，“pointm”）；
圆圈.attr（“cx”，180）.attr（“cy”，300）；
svg.append（“rect”）.attr（“width”，width）.attr（“height”，height）.on（“mousedown”，mouseclick）；
var lastIndex=0；
函数mouseclick（）{
设m=d3.鼠标（this）；
设p=closestPoint（path.node（），m）；
向前看=正确；
让currentPoint=path.node（）.getPointAtLength（lastIndex）；
if（p[0]finishPos）{
圆圈.attr（“cx”，scan.x）.attr（“cy”，scan.y）；
}
如果（转发）{
currentIndex+=1；
lastIndex=当前索引；
如果（扫描x完成POS）{
定时器=设置超时（动画，10）；
}
}
}
返回动画；
}
函数闭合点（路径节点，点）{
var pathLength=pathNode.getTotalLength（），精度=8，最佳，最佳长度，最佳距离=无穷大；
对于（变量扫描，扫描长度=0，扫描距离；扫描长度0.5）{
变量前、后、前长度、后长度、前距离、后距离；
如果（（beforeLength=bestLength-precision）>=0&&（beforeDistance=distance2（before=pathNode.getPointAtLength（beforeLength））