Question

我有一堆正方形网格使用两个while循环构建。我试图让它们单独淡入，一次使用.transition函数。但是，我注意到所有人都在一起过渡。我意识到D3是异步的，但我想知道是否有任何方法可以覆盖它。

请参阅下面的代码段并链接小提琴：https://jsfiddle.net/nxtjddvr/

谢谢！

var x = 0;
var y = 1;
var xLoc = 0;
var yLoc = 100;


while (x < 3) {

    svg.append('rect')
    .transition()
    .delay(function(d,i) {
        return i*2000
    })
    .duration(5000)
    .attr('width', '100')
    .attr('height', '100')
    .attr('x', xLoc)
    .attr('y', 0)
    .style('stroke', 'white' )

    while (y < 3) {
        svg.append('rect')
        .transition()
        .duration(5000)
        .attr('id', 'trans')
        .attr('width', '100')
        .attr('height', '100')
        .attr('x', xLoc)
        .attr('y', yLoc)
        .style('stroke', 'white' )
        yLoc += 100;
        y++;
    }
    yLoc = 100;
    y=1;
    xLoc += 100
    x++;
}

Answer 1

你不需要在d3中使用循环而你不需要窗口定时器，here是如何使用d3做你想做的事情的粗略想法......

var data = [32, 57, 112];
    var height = 300;
    var width = 300;

    d3.select('#chart')
    .append('svg')
    .style('background-color', 'lightgrey')

    var svg=d3.select('svg')
    .attr('height', height)
    .attr('width', width)


        svg.selectAll("rect")
        .data([1, 2, 3, 1, 2, 3, 1, 2, 3])
        .enter().append('rect')
        .attr('id', 'trans')
        .attr('width', '100')
        .attr('height', '100')
        .attr('x', function(d, i){
           return (d-1)*100 
         })
        .attr('y', function(d,i){
           return Math.floor((i/3))*100
         })
         .attr("opacity",0)
        .style('stroke', 'white' )
        .transition()
        .delay(function(d,i) {
            return i*2000
        })

        .duration(5000)

        .attr("opacity",1)

Answer 2

您可以使用一种递归的setTimeout方法。这个想法是这样的：淡出，等待，淡出，等待等等。直到你完成。

这样的事情：

var elementCount = 3;

function chainReaction() {
    // remove your element here

    elementCount--;

    if(elementCount > 0) {
        window.setTimeout(function(){
            chainReaction();
        }, 500);
    }
}

chainReaction();

这是一个快速的JSFiddle：https://github.com/Incarnation-p-lee/libds

过渡面板顺序而不是全部（D3）

2 个答案: