d3js中級教程之漂浮的卡牌效果(data的key函數(shù)進(jìn)階)

Lin_R 發(fā)布于2019-08-21 12:13 / 3034人閱讀

摘要：效果如圖所示鏈接地址源碼鏈接地址其實(shí)這個(gè)例子也很簡單用到的也只是的基礎(chǔ)部分我們要把一定間隔請求過來的數(shù)據(jù)進(jìn)行排序并生成元素同時(shí)重用原來和新數(shù)據(jù)相對應(yīng)的元素刪除不對應(yīng)的說的有點(diǎn)繞表達(dá)能力不行其實(shí)說到這明白人都能看出來了這要用到選擇器的以及方法

效果如圖所示,demo鏈接地址
源碼鏈接地址

其實(shí)這個(gè)例子也很簡單,用到的也只是d3的基礎(chǔ)部分,我們要把一定間隔請求過來的數(shù)據(jù)進(jìn)行排序, 并生成dom元素,同時(shí)重用原來和新數(shù)據(jù)相對應(yīng)的dom元素,刪除不對應(yīng)的,說的有點(diǎn)繞,表達(dá)能力不行,其實(shí)說到這明白人都能看出來了,這要用到D3選擇器的enter()以及exit()方法,至于動畫用到css3的transition.
首先,我準(zhǔn)備了兩份數(shù)據(jù),一份是一個(gè)對象數(shù)組叫data,另一份也是一個(gè)對象數(shù)組叫anther_data,兩份數(shù)據(jù)結(jié)構(gòu)一樣,內(nèi)容不同,設(shè)定每一個(gè)方塊的位置和動畫樣式,

.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....

其次,根據(jù)data數(shù)據(jù)通過selection.enter()方法生成初始的dom元素,并編寫go函數(shù)根據(jù)接收的data對頁面進(jìn)行重繪和重排,在這里Key函數(shù)起到關(guān)鍵作用了,根據(jù)url相同,決定哪些dom需要重新生成,哪些dom需要?jiǎng)h除,(關(guān)于Key 函數(shù)可以參考我之前的博文)

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;
                });

最后, 兩秒運(yùn)行一次go函數(shù)加載不同的數(shù)據(jù)

setInterval(function() {
        if(temp) {
            go(another_data);
        } else {
            go(data);
        }
        temp = !temp;
    }, 2000);

希望我的文章能幫助到你,更多資料請翻閱d3js.org,
我是朱現(xiàn)明,任職于精碩科技可視化部門前端開發(fā),更多精彩的文章即將奉上.

GPU云服務(wù)器云服務(wù)器漂浮效果 js 漂浮動畫效果 js圖片翻牌效果 java中級教程

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87511.html

發(fā)表評論

登陸后可評論

0條評論

Lin_R

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow標(biāo)準(zhǔn)化

閱讀 2670·2023-04-26 02:44
極客業(yè)務(wù)架構(gòu)實(shí)戰(zhàn)營李運(yùn)華

閱讀 8656·2021-11-22 14:44
[C/C++]C++的IO流

閱讀 2131·2021-09-27 13:36
舍利云：linode月拋機(jī)上線，新加坡機(jī)房2核4G內(nèi)存80G ssd，100元/臺，附簡單測評

閱讀 2528·2021-09-08 10:43
display有哪些值與 position的值relative和absolute定位的原點(diǎn)是？

閱讀 692·2019-08-30 15:56
實(shí)現(xiàn)marquee滾動效果

閱讀 1400·2019-08-30 15:55
用“五個(gè)為什么”寫CSS

閱讀 2895·2019-08-28 18:12
React Hook 不完全指南

閱讀 2837·2019-08-26 13:50

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

d3js中級教程之漂浮的卡牌效果(data的key函數(shù)進(jìn)階)

相關(guān)文章