d3js中级教程之漂浮的卡牌效果(data的key函数进阶)

效果如图所示,demo链接地址
源码链接地址

其实这个例子也很简单,用到的也只是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,
我是朱现明,任职于精硕科技可视化部门前端开发,更多精彩的文章即将奉上.