帶有新數據的更新圖

Question

我有一個我想按順序繪製的文件列表（線圖），創建一個動畫作爲它們之間的d3轉換。

我有一個更新函數，它將一個文件名作爲輸入，並將當前線圖轉換爲新的線圖。這工作正常。

但是，我現在想要在五個不同的文件之間順序轉換。

這裏是我使用的代碼：

var file_list = ["time1.csv", "time2.csv", "time3.csv", "time4.csv", "time5.csv"]; 

var num_files = file_list.length; 

for (i = 0; i < num_files; ++i) { 
    setTimeout(setDelay(i), 1000); 
} 

function setDelay(i) { 
    setTimeout(function(){ 
    update(file_list[i]); 
    }, 1000); 
} 

這確實我的過渡線圖，但它從第一（time1.csv）立即轉換到最後（time5.csv），跳過一切中間。

我怎樣才能找出問題所在？

如果我在循環中使用console.log（file_list [i]），它正在循環並打印time1.csv ... time5.csv。

謝謝！

Answer 1

的setDelay被稱爲在每個迭代上，以評估其對超時必須傳遞函數對象回調setTimeout(function() { setDelay(i); }, 1000)

但是你的邏輯是錯誤的，爲什麼是兩個setTimeout每次迭代？他們都在每次迭代後立即調用，您必須鏈接setDelay調用或乘以迭代索引的延遲。

var file_list = ["time1.csv", "time2.csv", "time3.csv", "time4.csv", "time5.csv"]; 

function setDelay() { 
    var file = file_list.shift(); 
    if (file) { 
     update(file); 
     setTimeout(setDelay, 1000); 
    } 
} 

setDelay();