Question

我想在for循环中链接d3动画。获得这样的东西的最佳方法是什么：

    for (var i=0; i<dat.length-1; i++) {
        var a = function(g,dat,i){
            /*
            g.transition().duration(i * 19)
                .attr("cy", dat[i+1].y1)
                .attr("cx", dat[i+1].x1)
                .attr("r", 10);*/
            console.log("transform " + dat[i+1].x1);
        };

        var t = setTimeout(a(g,dat,i), i*20);
    }

这是因为你无法将对象传递给setTimeout函数。

Answer 1

您可以使用transition.delay（）来链转换。 https://github.com/mbostock/d3/wiki/Transitions#wiki-delay

for (var i = 0; i < dat.length - 1; i++) {
    g.transition().duration(20).delay(i * 20)
        .attr("cy", dat[i + 1].y1)
        .attr("cx", dat[i + 1].x1);
}

Answer 2

我找到了一个适合我的解决方案。我觉得它仍然是丑陋的代码，但至少它是有效的。

首先，我为数据集中的每个数据创建一个不可见的对象：

g.data(dat) 
.enter()
.append("circle")
.attr("class", function(d,i) { return "default " + d.pn; })
.attr("cx", function(d,i) { return d.x1; })
.attr("cy", function(d,i) { return d.y1; })
.attr("r",  function(d,i) { return d.r; })
.style("opacity", 0);

然后我将针对每个元素进行转换：

        g.each(function(d,i){
            var delay = Math.floor((i+1) / nrOfElements);
            //console.log(delay);
            d3.select(this)
                .transition()
                .delay(delay * speed)
                .duration(speed + DELAY_OFFSET)
                .style("opacity", 100)
                .attr("cx", function(d) { return i<dat.length-1 ? dat[i+1].x1 : dat[i].x1; })
                .attr("cy", function(d) { return i<dat.length-1 ? dat[i+1].y1 : dat[i].y1; })
                .attr("r",  function(d) { return i<dat.length-1 ? dat[i+1].r : dat[i].r; })
                .style("stroke", "blue") // TODO: setAttributes
                .each("end", function() { 
                    // Reset to privious attributes
                    d3.select(this)
                        .attr("cx", function(d) { return dat[i].x1; })
                        .attr("cy", function(d) { return dat[i].y1; })
                        .attr("r",  function(d) { return dat[i].r; })
                        ;

                    if(i<dat.length-nrOfElements) d3.select(this).style("opacity", 0); 
                })
                ;
        });

这似乎是一项巨大的努力，为我编写了一个相当简单的要求......但至少它正在起作用..

仍然欢迎更好的解决方案!!

带有for循环的D3 Chaining Animations

2 个答案: