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

zhoutao 發布于2019-08-28 17:53 / 2661人閱讀

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

效果如圖所示,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,
我是朱現明,任職于精碩科技可視化部門前端開發,更多精彩的文章即將奉上.

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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