其实这个例子也很简单,用到的也只是d3的基础部分,我们要把一定间隔请求过来的数据进行排序, 并生成dom元素,同时重用原来和新数据相对应的dom元素,删除不对应的,说的有点绕,表达能力不行,其实说到这明白人都能看出来了,这要用到D3选择器的enter()以及exit()方法,至于动画用到css3的transition.
首先,我准备了两份数据,一份是一个对象数组叫data,另一份也是一个对象数组叫anther_data,两份数据结构一样,内容不同,设定每一个方块的位置和动画样式,
.site {
box-sizing: border-box;
-webkit-transition: 1s ease-out;
transition: 1s ease-out;
overflow: hidden;
background: green;
padding: 10px 20px;
position: absolute;
width: 200px;
height: 100px;
}
#index_0,#index_1....
其次,根据data数据通过selection.enter()方法生成初始的dom元素,并编写go函数根据接收的data对页面进行重绘和重排,在这里Key函数起到关键作用了,根据url相同,决定哪些dom需要重新生成,哪些dom需要删除,(关于Key 函数可以参考我之前的博文)
var sites = d3.selectAll(".site")
.data(data, function(d) {
return d.url;
});
删除不需要的dom
sites.exit().remove();
通过改变留下来的dom元素的id来改变它的位置
sites.attr("id", function(d, i) {
return "index_" + i;
});
生成新的dom元素
sites.enter()
.append("div")
.attr("class", "site")
.attr("id", function(d, i) {
return "index_" + i;
})
.text(function(d) {
return d.url;
});
最后, 两秒运行一次go函数加载不同的数据
setInterval(function() {
if(temp) {
go(another_data);
} else {
go(data);
}
temp = !temp;
}, 2000);
希望我的文章能帮助到你,更多资料请翻阅d3js.org,
我是朱现明,任职于精硕科技可视化部门前端开发,更多精彩的文章即将奉上.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。