Обновить, выйти, обновить, ввести шаблоны с переходом - PullRequest
Новая
       20

Обновить, выйти, обновить, ввести шаблоны с переходом

1 голос
/ 26 марта 2019

По сути, согласно 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), что является случайным числом.

Еще одно усилие, которое я попытался сделать, - дважды вызвать функцию с помощью: 

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

Оба метода не работают, с блоками, одновременно выходящими и обновляющимися одновременно, или, по крайней мере, похоже на это, моя догадка, что это из-за задержек.Я ищу лучший способ, чтобы иметь возможность выйти на номер по умолчанию и обновить на основе нового номера в рамках того же вызова функции.

Любая помощь очень ценится!

1 Ответ

1 голос
/ 26 марта 2019

Вы не можете просто позвонить 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

...