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

Question

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

Update 到 0
Exit 到 0
Update随机数
Enter 新号码

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

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

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

非常感谢任何帮助！

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

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

Update, exit, update, enter patterns with transition

javascript

settimeout

d3.js