D3數據連接之“更新”和“退出”

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

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

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

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

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

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

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

1. 數據點比元素多。這將觸發“進入”狀態（也有可能是“更新”狀態）。

2. 數據點和元素一樣多。這將觸發“更新”狀態。

3. 元素比數據點多。這將觸發“退出”狀態（也可能是“更新”狀態）。

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

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