0

我正在编写一个测试程序来学习 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/

4

1 回答 1

2

你几乎拥有它！您发布的小提琴在“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/

我改变了一些东西试图让它工作，但基本上只有在从'.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)”）。

于 2013-05-22T15:00:59.107 回答