Я не могу получить переход d3 для работы с requestAnimationFrame

Question

Я собираю тестовую программу для изучения d3.js. Однако я не могу заставить переходы работать. Я несколько раз просматривал документацию и не могу понять, что я делаю неправильно.

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

 (function(){ 
     "use strict"; 
     var randArray = []; 

     (function randomWalk(){ 
      for(var i=0;i<5;i++) randArray[i] = Math.round(Math.random() * 10) % 2? randArray[i]+1 || Math.round(Math.random() * 10) : randArray[i]-1 || Math.round(Math.random() * 10); 
      setTimeout(randomWalk,800); 
     })(); 

     (function update(){ 
      var d3 = window.d3 || {}, 
       mySelection = d3.select("div#container").selectAll("div").data(randArray); 
       mySelection.enter().append("div").text(function(d){return ""+d;}); 
       mySelection.text(function(d){return ""+d;}).transition().style('padding-bottom',function(d,i){return (d*2.5)+'em'}); 

      requestAnimationFrame(update); 
     })(); 

    })(); 

Вот jsfiddle: http://jsfiddle.net/Racheet/bPfFY/

Answer 1

Вы чуть было не это! Скрипку вы вывесили пропускал период до «перехода()»:

mySelection.enter().append("div") 
    .text(function(d){return ""+d;}) 
    .transition().style('padding-bottom',function(d,i){return (d*2.5)+'em'}); 

Изменено скрипку: http://jsfiddle.net/bPfFY/2/

В настоящее время существует только один переход при загрузке страницы. Если вы хотите, чтобы бары изменялись каждые полсекунды, вам нужно обновить значение randArray при вызове обновления.

Edit: После прочтения ваших комментариев, я обновил скрипку http://jsfiddle.net/bPfFY/3/

Я изменил несколько вещей, которые пытаются заставить его работать, но в основном 'Введите желанный() используется только при добавлении элементов страницу из '.data()'. Когда мы вызвали обновление во второй раз, divs уже существуют, и в разделе «.enter()» ничего не найдено (подробнее об этом: http://bost.ocks.org/mike/join/)

Когда вызывается update(), мы должны просто выбрать уже существующий DIV элементы, обновлять свои значения данных и использовать новые значения для перерисовки текста и отступы:

d3.select("div#container") 
     .selectAll("div").data(randArray) 
    .text(function(d){return ""+d;}) 
     .transition().duration(500) 
    .style('padding-bottom', function(d, i){return (d*2.5 + 'px');}); 

Я также изменил requestAnimationFrame (обновление) до SetTimeout (обновление, 1000). d3 не привязывает анимацию, поэтому обычно лучше всего убедиться, что она завершена (с «.duration (500)»), прежде чем запускать другую.