我無法讓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

你幾乎擁有它！ 你發布的小提琴錯過了'transition（）'之前的一段時間：

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/

目前，頁面加載時只有一個轉換。 如果你希望每半秒更改一次條，你需要在調用update時更新randArray的值。

編輯：閱讀完評論后，我更新了小提琴http://jsfiddle.net/bPfFY/3/

我改變了一些嘗試讓它工作的東西，但基本上'.enter（）'僅在從'.data（）'向頁面添加元素時使用。 當我們第二次調用update時，div已經存在並且'.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（update）更改為setTimeout（update，1000）。 d3不鏈接動畫，所以通常最好確保一個完成（使用'.duration（500）'）然后再啟動另一個動畫。