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的颜色。但是,它似乎不起作用。调用转换的方式有问题吗?
答案 0 :(得分:0)
毕竟,矩阵没有正确循环。 for循环试图在没有任何东西的情况下循环rect,为了修复它我添加了一个单独的增量。