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

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.

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.

Any help is much appreciated!

回答1:

You cannot just call update twice, like this:

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

You have to set up another 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));
})();

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

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

来源：https://stackoverflow.com/questions/55353309/update-exit-update-enter-patterns-with-transition

标签

javascript

d3.js

settimeout