javascript - 我无法让 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

你几乎已经拥有它了!您发布的 fiddle 在“transition()”之前缺少一个句点:

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

更新的 fiddle :http://jsfiddle.net/bPfFY/2/

目前，页面加载时只有一次转换。如果您希望条形图每半秒更改一次，则需要在调用 update 时更新 randArray 的值。

编辑:阅读您的评论后，我更新了 fiddle http://jsfiddle.net/bPfFY/3/

我改变了一些东西试图让它工作，但基本上只有当从“.data()”向页面添加元素时才使用“.enter()”。当我们第二次调用 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)”)。