Question

我有一个非常大的csv文件，我用D3.js可视化其中一个数据字段是时间戳，所以（而不是一次显示所有这些信息）我想在与时间戳成比例的延迟之后创建一个svg元素（基于其他数据字段），然后将其淡出三个秒。由于数据的大小，我无法预先创建所有元素，即使它们是不可见的;每个元素应该只存在三秒钟。期望的效果是一堆点突然出现然后逐渐消失。

我最好的尝试如下。策略是使用两个转换：延迟，然后是淡入淡出转换。它似乎不起作用，而是一次创建所有元素（尽管淡入淡出）。

d3.csv(datafile).get(function(error, rows) {
        for (var i = rows.length; i--;){
                var d = rows[i];
                plot.select("foo") // empty selection
                    .transition()
                    .delay(/*expression with d.timestamp*/)
                    .call(function(){
                        plot.append("circle")
                            .attr(/*several, snip */)
                            .style("opacity", 1)
                            .transition()
                            .duration(3000)
                            .style("opacity", 0)
                            .remove()
                    });
        }

    });

编辑2015年4月自提出问题以来已经学到了很多东西，显而易见的事情似乎是立即插入0不透明度。然后创建持续时间0，可变延迟过渡以捕捉到1个不透明度，然后从那里淡出。还使用嵌套选择来避免显式的for循环。我没有尝试过，但它应工作。

Answer 1

您是否尝试过使用setTimeout？

        rows.forEach(function(d, i){
            setTimeout(function(){
                    plot.append("circle")
                        .attr(/*several, snip */)
                        .style("opacity", 1)
                        .transition()
                        .duration(3000)
                        .style("opacity", 0)
                        .remove()
            }, /*expression with d.timestamp*/);
        })

Answer 2

我知道这很老了，但是我遇到了同样的问题，并试图以承诺解决它，然后找到了一个比我做得更好的解决方案。

The full post is here

const sleep = (milliseconds) => {
  return new Promise(resolve => setTimeout(resolve, milliseconds))
}

然后

sleep(500).then(() => {
  //do stuff
})

D3：延迟后添加元素，然后转换

2 个答案: