0

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 関数に渡すことができないため、これはうまく機能しません。

4

2 に答える 2

0

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);
}
于 2013-01-02T16:12:26.437 に答える
0

自分に合った解決策を見つけました。まだ醜いコードだと思いますが、少なくとも動作します。

まず、データセット内の各データに対して非表示のオブジェクトを作成します。

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

これは、かなり単純な要件のためにコーディングするのに多大な努力を払っているように思えます...しかし、少なくともそれは機能しています..

より良い解決策はまだ大歓迎です!!

于 2013-01-06T09:50:24.660 に答える