跟随D3中的运动图像的虚线路径

Question

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

我找到了一个D3 example，其中有一条跟随鼠标的虚线路径。我尝试了相同的代码，暂时为一个图像创建一个路径。而不是鼠标X＆amp; 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();
  }
}

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

Answer 1

第一个问题：“结果显示粗线” 您需要提供fill none

的原因

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

你没有给出该线的风格。

第二个问题：无序的方式在背景图像之上

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

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

我已经更正了将点数创建为1秒的时间间隔。 此外，我已将图像的转换时间更改为100毫秒。

工作代码here