在D3中移動圖像之後的虛線路徑

在這裏，我正在使用隨機的x和y動態移動圖像，並在拖動SVG的縮放內部移動圖像&。現在我想追加這些移動圖像的虛線路徑。類似下面的圖片：在D3中移動圖像之後的虛線路徑

我發現了一個D3 example，跟隨鼠標移動虛線路徑在哪裏。我嘗試了相同的代碼，暫時爲一個圖像創建路徑。 Y座標代替鼠標X，我使用運動圖像的隨機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，並請提供一種爲運動圖像創建虛線路徑的方法。

來源

2017-02-16 Nayana_Das

第一個問題：「結果是粗線顯示」你需要 理由放棄fill none

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

你沒有給該行的風格。

問題二：在背景圖像

原因的頂部紊亂的方式在運行在50毫秒，但過渡的跨度的時間間隔將圖像從點1移動到點2是6000毫秒，因此圖像不能移動到其新的計算出的隨機位置。

總之，這種異常是因爲你在50毫秒內創建了新的點，但是想要在6000毫秒內轉換到新的位置，所以點不能移動到它的位置。

我已更正時間間隔以創建點數爲1秒。此外，我已經改變了圖像在100毫秒內移動的過渡時間。

工作代碼here

來源

2017-02-16 05:10:50 Cyril

看到你在'setInterval'功能創建新的隨機點，可以從1000毫秒到2000毫秒 – Cyril

謝謝您的回答耽誤點創建，我有一個疑問，它的有點混亂，當運動變得如此之快，所以我如何減慢運動速度，如何爲所有其他圖像添加路徑？請解釋。 –

請你解釋一下，如何爲所有其他圖像添加路徑？ –

在D3中移動圖像之後的虛線路徑

回答

相關問題