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

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

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

更新，退出，更新并输入带有过渡的模式

1 个答案: