更新，退出，更新，输入带有过渡的图案 [英] Update, exit, update, enter patterns with transition

问题描述

本质上，根据，我一直在尝试，

Essentially, according to this bl.ocks, I am trying to have all the blocks go to 0 before starting a new sequence. I think what I require is the following sequence:

• Update到0
• Exit到0
• Update随机数
• Enter具有新编号

• Update to 0
• Exit to 0
• Update random number
• Enter with new number

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

I have tried to follow the pattern above by adding the following code block:

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)这是随机数.

Essentially the parts that I added are the additional cellUpdate first by entering with 0 data and then by selecting range(n1) which is the random number.

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

Another effort I tried was 2 call the function twice with:

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

这两种方法都不起作用，因为块同时同时退出和更新，或者至少看起来像这样，我直觉这是由于延迟造成的.我正在寻找能够退出默认编号并在同一函数调用中基于新编号进行更新的最佳方法.

Both methods do not work, with blocks both simultaneously exiting and updating at the same time, or at least looks like it, my hunch that it is because of the delays. I am looking for the best method to be able to exit to a default number and update based on a new number within the same function call.

非常感谢您的帮助！

推荐答案

您不能像这样仅两次调用update:

You cannot just call update twice, like this:

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，您可能需要相应地更改这些延迟.

Here I lazily just multiplied the delay of the setTimeout which calls interval again by 2, you may want to change those delays accordingly.

以下是更新的bl.ocks:/9b3fc45d5c1d3af7e53daef7df28ac11/e25d1478fc2899a402e1dbfaad2090df6b012804

Here is the updated bl.ocks: https://bl.ocks.org/GerardoFurtado/9b3fc45d5c1d3af7e53daef7df28ac11/e25d1478fc2899a402e1dbfaad2090df6b012804

这篇关于更新，退出，更新，输入带有过渡的图案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！