D3.js D3中运动图像后的虚线路径

在这里，我在缩放和拖动SVG中使用随机x和y动态处理运动图像。现在我想在这些运动图像后面附加虚线路径。与下图类似：

我找到了一个，一条点着的小径跟着鼠标。我试着用同样的代码暂时为一个图像创建一个路径。我使用了运动图像的随机X和Y值，而不是鼠标的X和Y坐标

var pt = [];
pt.push(randomX);pt.push(randomY);
tick(pt);

function tick(pt) {

  // push a new data point onto the back
  ptdata.push(pt);

  // Redraw the path:
  path.attr("d", function(d) { return line(d);})

  // If more than 100 points, drop the old data pt off the front
  if (ptdata.length > npoints) {
      ptdata.shift();
  }
}

但结果是在背景图像（草纹理图像）顶部以无序方式显示粗线条。请查看并建议一种为运动图像创建虚线路径的方法

第一个问题：“结果显示粗线” 您需要给出的原因

无需填写

.line {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
  stroke-dasharray: 2,5;
}

你没有给出这条线的风格

第二个问题：背景图像顶部的无序方式

原因是你在50毫秒的范围内运行时间间隔， 但将图像从点1移动到点2的过渡时间为6000毫秒，因此图像无法移动到新计算的随机位置

简而言之，异常是因为您在50毫秒内创建了新点，但希望在6000毫秒内转换到新位置，因此这些点无法移动到其位置

我已将创建点的时间间隔更正为1秒。 我还改变了图像的转换时间，使其以100毫秒为单位移动

---

工作代码

见您在

设置间隔

功能中创建新的随机点，您可以将点创建从1000毫秒延迟到2000毫秒谢谢您的回答，我有一个疑问，当移动速度变得如此之快时，它有点令人困惑，因此我如何减慢移动速度，如何为所有其他图像添加路径？请解释一下。你能解释一下，如何为所有其他图像添加路径吗？在我的小提琴线107-111中，我随机点并将其添加到数组中。下面在if-else块中使用相同的随机点来更新图像位置。我已经制作了三个路径的示例，您可以使其更好。