用新数据更新图形

update graph with new data

本文关键字:更新 图形 数据 新数据      更新时间:2023-09-26

我有一个文件列表,我想按顺序绘制(线形图),创建一个动画作为它们之间的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 .

谢谢!

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();