Пунктирная дорожка, следующая за движущимися изображениями в D3

Question

Здесь я динамически обрабатываю движущиеся изображения со случайными x и y, внутри масштабирования &, перетаскивая SVG. Теперь я хочу добавить пунктирный путь после этих движущихся изображений. Похож на изображение ниже:

Я нашел D3 example, где пунктирный путь после мыши. Я попробовал тот же код, чтобы создать путь для одного изображения. Вместо мыши 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(); 
    } 
} 

Но результат был толстые линии, отображаемые в разлада образом поверх фонового изображения (Grass Texture изображения). Пожалуйста, ознакомьтесь с 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