D3數(shù)據(jù)連接之“更新”和“退出”

摘要： 昨天的推送中，我們闡述了數(shù)據(jù)連接的進入階段。本文中，我們學(xué)習(xí)一下其更新和退出機制。 本文選自《圖說D3：數(shù)據(jù)可視化利器從入門到進階》。

　　讓我們回到之前那個“怪咖”Frank那里，重新審視一下他的那些小報封面數(shù)據(jù)，看一下Frank手頭前3個月的數(shù)據(jù)，以及我們之前做過的事情。
　　到目前為止，我們只讓1月的數(shù)據(jù)“進入”頁面，并渲染出一系列文本元素。
　　讓文本進入頁面。
　　　　　　　　
　　頁面上有文本元素，每個都表示janData中的一個數(shù)據(jù)點?，F(xiàn)在我們要更新頁面，顯示2月的數(shù)據(jù)。就像“進入”一樣，我們選中頁面上的文本元素，并用data()方法調(diào)用數(shù)據(jù)連接。區(qū)別在于，這次頁面上已經(jīng)有文本元素了。所以，我們要將數(shù)據(jù)綁定到已經(jīng)存在的數(shù)據(jù)上，而不是創(chuàng)建新的元素。
　　　　　　　　

　　這就是“更新”。我們使用新的數(shù)據(jù)更新元素?，F(xiàn)在，由于新數(shù)據(jù)被綁定到元素上，我們可以通知頁面頂部的文本讀取“Jennifer Aniston”，而不是“Angelina Jolie”（將在后面的章節(jié)描述具體細(xì)節(jié)）。
　　注意，此處并沒有update()的方法。通過enter()方法調(diào)用，你創(chuàng)建了一個特殊的對象占位集，每一個占位表示數(shù)據(jù)集中一個尚未綁定的數(shù)據(jù)點。但是，為了更新頁面上已有的元素，你并不需要這么做。只要創(chuàng)建這些元素的選擇集，就可以通知它們基于最新綁定的數(shù)據(jù)進行渲染了。
　　你可能會很好奇，上圖中那個很醒目的問號是什么？其存在的理由是：2月的數(shù)據(jù)有5個點，而1月只有4個。那么，這第5個數(shù)據(jù)點該如何操作？它還沒有綁定任何元素?。?br />　　如果你猜這時它會自動“進入”頁面，那就錯了。我們可以像以前那樣使用enter()方法調(diào)用。

　　但是，這次該方法只會創(chuàng)建一個沒有元素關(guān)聯(lián)的數(shù)據(jù)點，而會不像以前那樣創(chuàng)建5個全新的占位元素。D3這時可以很好地滿足你的要求。
　　現(xiàn)在，我們像往常一樣調(diào)用就可以新建一個文本元素，數(shù)據(jù)和元素又再次全部匹配了。

　　很好，我們將目光移到3月。我們要做的還是選中頁面上的所有文本元素，然后將3月的數(shù)據(jù)連接上去。

　　但是，由于3月只有4條數(shù)據(jù)，所以數(shù)據(jù)點實際上比待綁定的元素還要少。有數(shù)據(jù)進來的元素可以很簡單地得到更新，但是那些沒有匹配到數(shù)據(jù)的元素呢？現(xiàn)在就是“退出”出場的時候了。我們需要刪掉第5個文本元素（就像離開舞臺的演員一樣），exit()方法就能派上用場了。一般而言，執(zhí)行完數(shù)據(jù)連接后，我們可以使用exit()方法來選中所有不再有數(shù)據(jù)綁定的元素。然后，我們可以利用另外一個方法remove()來移除它。

　　就這樣，我們介紹了數(shù)據(jù)連接的整個生命過程——進入、更新和退出。數(shù)據(jù)連接的基礎(chǔ)概念非常簡單：圖形總是出現(xiàn)在頁面上，不斷變換，最終離開頁面，就像劇場舞臺上的演員，登臺，表演，退場。D3通過將數(shù)據(jù)點和元素進行連接、綁定、比較來處理這3種狀態(tài)的輪換 。其只可能出現(xiàn)以下3種結(jié)果。

1. 數(shù)據(jù)點比元素多。這將觸發(fā)“進入”狀態(tài)（也有可能是“更新”狀態(tài)）。

2. 數(shù)據(jù)點和元素一樣多。這將觸發(fā)“更新”狀態(tài)。

3. 元素比數(shù)據(jù)點多。這將觸發(fā)“退出”狀態(tài)（也可能是“更新”狀態(tài)）。

但是，也有和劇場這個比喻不一樣的地方：在一場表演中，演員必須遵循登臺、表演、退場這樣的節(jié)奏，但是在D3中，你不一定要全部經(jīng)歷這3種狀態(tài)的變遷。有時候，你會用D3制作一個靜態(tài)的圖形，只需要調(diào)用enter()即可。在其他場景下，數(shù)據(jù)點和元素保持一致，所以你永遠(yuǎn)不需要調(diào)用（實際上，我們的條形圖就是這種情況）。

　　本文選自《圖說D3：數(shù)據(jù)可視化利器從入門到進階》，點此鏈接可在博文視點官網(wǎng)查看此書。
　　　　　　　　　　　　　　　　　　　
　　想及時獲得更多精彩文章，可在微信中搜索“博文視點”或者掃描下方二維碼并關(guān)注。