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

zhoutao 发布于2019-08-28 17:53 / 2549人阅读

摘要：效果如图所示链接地址源码链接地址其实这个例子也很简单用到的也只是的基础部分我们要把一定间隔请求过来的数据进行排序并生成元素同时重用原来和新数据相对应的元素删除不对应的说的有点绕表达能力不行其实说到这明白人都能看出来了这要用到选择器的以及方法

效果如图所示,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,
我是朱现明,任职于精硕科技可视化部门前端开发,更多精彩的文章即将奉上.

混合云私有云漂浮效果 js 漂浮动画效果 js图片翻牌效果 java中级教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110873.html

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

摘要：效果如图所示链接地址源码链接地址其实这个例子也很简单用到的也只是的基础部分我们要把一定间隔请求过来的数据进行排序并生成元素同时重用原来和新数据相对应的元素删除不对应的说的有点绕表达能力不行其实说到这明白人都能看出来了这要用到选择器的以及方法 showImg(http://segmentfault.com/img/bVbZY5); 效果如图所示,demo链接地址源码链接地址其实这个例...

Lin_R 2019-08-21 12:13 评论0 收藏0
D3中级教程之带有动画效果的简易罗盘

摘要：最终效果如上图所示说是中级教程代码其实也太简单源码链接在此部分解释一下首先声明这是作者推荐的写法还是规范点好这样写不久你就会发现事半功倍其次是函数画圆环全靠它自定义函数用于给定和圆环的最大值计算结束角度自定义函数用于给定和圆环的最大值计算指 showImg(http://segmentfault.com/img/bVbX9J); 最终效果如上图所示说是中级教程,代码其实也太简...

littlelightss 2019-08-21 12:12 评论0 收藏0
d3初级教程之data的Key函数

摘要：一开始用一直都没留意到还有个参数后来刚接触到函数就有些让我迷惑了再后来发现这的确是个神器呀巴拉巴拉巴拉废话不多说让我们通过一个简单的来认识一下它在一个空白页添加下面代码样式三个天蓝色小蓝条登场分别是宽度为的元素我们在中添加如下代码并运行情况一开始用D3.data()一直都没留意到还有个Key参数,后来刚接触到key函数就有些让我迷惑了,再后来发现这的确是个神器呀.巴拉巴拉巴拉...废...

enda 2019-08-21 12:12 评论0 收藏0
微信小程序教学第二章（含视频）：小程序中级实战教程之预备篇 - 提取util公用方法｜基于最新版1

摘要：官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。翻译能猫声明本双语文章的中文翻译系英语原创内容，转载请注明出处。 iKcamp官网：http://www.ikcamp.com 访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。包含：文章、视频、源代码 sh...

learning 2019-08-30 13:48 评论0 收藏0
微信小程序教学第二章（含视频）：小程序中级实战教程之预备篇 - 提取util公用方法｜基于最新版1

摘要：官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。翻译能猫声明本双语文章的中文翻译系英语原创内容，转载请注明出处。 iKcamp官网：http://www.ikcamp.com 访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。包含：文章、视频、源代码 sh...

hlcfan 2019-08-21 17:07 评论0 收藏0