从setInterval函数(D3.js)调用时,样式转换似乎不起作用

时间:2018-03-15 05:59:46

标签: javascript d3.js transition

function updateGrid() {
//this for loop moves the matrix and sets a position 
    for (var row = row_start; row < row_end; row+=5) {
        for (var i = 0; i < 5; i++) {
            //these for loops call each individual rect on the grid by a unique id.
            d3.select("#x-"+row+"y-"+(i*20))
                .transition()
                .style("fill", function(d) {
                    var alt = 0;
                    switch (i) {
                        //ignore this switch statement. It's just reversing the i because the tag is backwards.
                        case 0: alt = 4; break;
                        case 1: alt = 3; break;
                        case 3: alt = 1; break;
                        case 4: alt = 0; break;
                        default: alt = 2; break;
                    }
                    //color_matrix is an object. row is the key, and alt is the position of the array that is the key value.
                    if (color_matrix[row][alt] == 0) return colors[0]; 
                    if (color_matrix[row][alt] == 1) return colors[1]; 
                    if (color_matrix[row][alt] == 2) return colors[2]; 
                    if (color_matrix[row][alt] == 3) return colors[3]; 
                    if (color_matrix[row][alt] >= 4) return colors[4]; 
                })
                .duration(750);
        }
    }
    //this moves the matrix by one column. console.log() shows that it works.
    row_start += 5;
    row_end += 5;
}

var run = window.setInterval(function() { updateGrid() }, 5000);

所以我似乎无法想出这个。首先要注意几点:
1.颜色在矩形初始化中完美运行 2.过渡也是第一次正确的过渡 3.正确调用该函数,因为我对console.log()进行了测试 4.矩阵/物体也正确循环 5.持续时间的位置似乎并不重要。

唯一不能正常工作的是颜色变化。将每五秒调用此更新函数以更改rects的颜色。但是,它似乎不起作用。调用转换的方式有问题吗?

1 个答案:

答案 0 :(得分:0)

毕竟,矩阵没有正确循环。 for循环试图在没有任何东西的情况下循环rect,为了修复它我添加了一个单独的增量。