d3.js - D3 : Add element after delay, 然后转换

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*/);
        })