D3數(shù)據(jù)連接之“更新”和“退出”-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)公司于2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元桐鄉(xiāng)做網(wǎng)站,已為上家服務(wù),為桐鄉(xiāng)各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

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

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

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

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

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

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

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

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

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

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：D3數(shù)據(jù)連接之“更新”和“退出”-創(chuàng)新互聯(lián)
分享地址：http://m.kartarina.com/article36/cdscpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、全網(wǎng)營銷推廣、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、標(biāo)簽優(yōu)化、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)