我正在编写一个测试程序来学习 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/
最佳答案
你几乎已经拥有它了!您发布的 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)”)。
关于javascript - 我无法让 d3 过渡与 requestAnimationFrame 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16694873/