javascript - 更新、退出、更新、进入带有转换的模式

Question

基本上，根据 this bl.ocks，我试图在开始新序列之前让所有 block 都变为 0。我认为我需要的是以下顺序:

• 更新为0
• 退出到0
• 更新随机数
• 输入新号码

我尝试通过添加以下代码块来遵循上述模式:

function update(n1) {

  var cellUpdate = cell.selectAll("rect")
      .data(d3.range(0));

  var n0 = cell.selectAll("rect").size();

  var cellExit = cellUpdate.exit().transition()
      .delay(function(d, i) { return (n0 - i) * updateDelay; })
      .duration(updateDuration)
      .attr("width", 0)
      .remove();

  var cellUpdate = cell.selectAll("rect")
      .data(d3.range(n1));

  var cellEnter = cellUpdate.enter().append("rect")
      .attr("width", 0)
      .attr("height", cellSize)
      .attr("x", function(i) {
        var x0 = Math.floor(i / 100) % 10, x1 = Math.floor(i % 10);
        return groupSpacing * x0 + (cellSpacing + cellSize) * (x1 + x0 * 10);
      })
      .attr("y", function(i) {
        var y0 = Math.floor(i / 1000), y1 = Math.floor(i % 100 / 10);
        return groupSpacing * y0 + (cellSpacing + cellSize) * (y1 + y0 * 10);
      })
    .transition()
      .delay(function(d, i) { return (i - n0) * updateDelay; })
      .duration(updateDuration)
      .attr("width", cellSize);

基本上，我添加的部分是额外的 cellUpdate，首先输入 0 数据，然后选择 range(n1)，这是随机数。

我尝试的另一项努力是 2 调用该函数两次:

(function interval() {
  update(Math.floor(0);
  update(Math.floor(Math.random() * 100 * 100));
  setTimeout(interval, updateDelay * 100 * 100 + updateDuration + 1000);
})();

这两种方法都不起作用， block 同时退出和同时更新，或者至少看起来像，我的直觉是因为延迟。我正在寻找能够退出到默认号码并根据同一函数调用中的新号码进行更新的最佳方法。

非常感谢任何帮助!

Answer 1

你不能只调用 update 两次，就像这样:

update(Math.floor(0);
update(Math.floor(Math.random() * 100 * 100));

你必须设置另一个setTimeout:

(function interval() {
    update(Math.floor(Math.random() * 100 * 100));
    setTimeout(function() {
            update(0)
        },
        updateDelay * 100 * 100 + updateDuration + 1000);
    setTimeout(interval, 2 * (updateDelay * 100 * 100 + updateDuration + 1000));
})();

在这里，我懒洋洋地将再次调用 interval 的 setTimeout 的延迟乘以 2，您可能需要相应地更改这些延迟。

这是更新的 bl.ocks:https://bl.ocks.org/GerardoFurtado/9b3fc45d5c1d3af7e53daef7df28ac11/e25d1478fc2899a402e1dbfaad2090df6b012804