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