D3數(shù)據(jù)連接：進(jìn)入

引言：數(shù)據(jù)連接是D3中的面包和黃油。D3不提供制圖的基礎(chǔ)函數(shù)，相反，它靠的是數(shù)據(jù)連接。數(shù)據(jù)連接可以讓頁面元素進(jìn)入網(wǎng)頁，一旦進(jìn)入，可以修改、更新及退出。本文將主要介紹“進(jìn)入”部分。
本文選自《圖說D3：數(shù)據(jù)可視化利器從入門到進(jìn)階》。

什么是數(shù)據(jù)連接

　　顧名思義，數(shù)據(jù)連接肯定是將數(shù)據(jù)和某些東西連接起來。這些東西是網(wǎng)頁上的一個或一組——< rect>、< circle>、< div>等所有值得懷疑的常見元素。具體一點，就是這些常見元素的一個D3選擇集。　　 

　　在深入了解之前，讓我們忘記D3一會兒。現(xiàn)在，想象有一幅可交互的圖形，可以是你以前看到過的、自己寫的或者剛剛想象出來的，其中有一些代表數(shù)據(jù)的圖形及一些用來控制某些數(shù)據(jù)顯示與否的按鈕。當(dāng)你點擊這些按鈕，圖形會發(fā)生變化：位置偏移了，發(fā)光或者閃爍，顏色也變了，甚至可以一起從屏幕中飛出——要多瘋狂有多瘋狂。

　　現(xiàn)在，不管你的圖形多么復(fù)雜，包含了多少數(shù)據(jù)，從基礎(chǔ)層面看，涉及的這些形狀（或線、文本標(biāo)簽、顏色及紋理）都只是在做以下3件事情。

• 顯示在頁面上——沒有數(shù)據(jù)和圖形就不可能有數(shù)據(jù)可視化，所以圖形需要顯示出來。

• 變換——當(dāng)你點擊按鈕或調(diào)整滑塊，圖形的屬性會按你想看到的最新數(shù)據(jù)進(jìn)行更新。

• 離開頁面——有時，如果一個或多個圖形表示的數(shù)據(jù)不再有效，其會從頁面完全移除。

就是這樣的3件事情。一個交互式圖形就像一座劇院，當(dāng)演出的時候，演員進(jìn)入舞臺，表演節(jié)目，然后退場。在數(shù)據(jù)可視化中，形狀——或更籠統(tǒng)地說，圖形元素——進(jìn)入頁面，更新自身，然后退出。
　　數(shù)據(jù)連接充分利用了上述的初步想法。使用時，可以通過指令讓圖形元素進(jìn)入、更新和退出。（實際上，我直接從D3中搬來了“enter”、“update”及“exit”這些詞。）
　　此外，D3讓你可以基于數(shù)據(jù)執(zhí)行上述所有操作。D3通過一種稱為“數(shù)據(jù)綁定”的技術(shù)來達(dá)成這種能力。無論何時執(zhí)行數(shù)據(jù)連接，數(shù)據(jù)會真正被關(guān)聯(lián)，或綁定到元素上。這真的太方便了，D3讓你可以非常輕松地綁定數(shù)據(jù)了。所以，你會說：“好了，矩形，你所綁定的數(shù)據(jù)是多少？35？嗯，好吧，希望你的寬度也正好是這么寬。”
　　為了說明數(shù)據(jù)連接是如何工作的，我打算引入一個新的示例—— 一個涉及數(shù)據(jù)連接基本概念各方面知識點的示例。為了構(gòu)建之前那幅人口分布條形圖，我們也會引入數(shù)據(jù)連接，但不會描述得那么完整。所以，雖然有點跑題，但是引入一個新示例將有助于我們研究數(shù)據(jù)連接的方方面面。
　　本文只涉及數(shù)據(jù)連接知識的一部分，重點在其整個生命周期中關(guān)于“進(jìn)入”的部分。在后面的推送中，我們會用同樣的示例來詳細(xì)闡述“更新”和“退出”部分。
　　好了，我們開始。
　　假設(shè)你有一個朋友，名字叫Frank。Frank有一個癖好是喜歡看明星八卦雜志和各種小道報刊?！睹绹芸?、《人物》及《國家調(diào)查者》等，就是那種你在雜貨店排隊結(jié)賬，百無聊賴時會瞥見的刊物，F(xiàn)rank一定會有強(qiáng)烈的興趣。問題是，他其實并不關(guān)心Kim和Kanye的近況，他只是想知道一件事情：誰上封面了？
　　Frank最近一直在關(guān)注20多種不同雜志期刊封面上的特色名人，一個月內(nèi)會有約50張不同的封面——已經(jīng)持續(xù)了1年。此外，他還研究了過去4年各個封面人物的情況?！拔艺J(rèn)為那些在任何時刻都被人們議論的名人體現(xiàn)了這個國家的精神面貌”，F(xiàn)rank啰唆道。你有你的懷疑，但當(dāng)Frank找到你并請求你幫他將這些信息做成可視化圖形時，你也沒法拒絕。
　　Frank的想法是：基于他所收集的近5年的數(shù)據(jù)，按月顯示最熱門的5個名人。他希望這個可視化圖形是可以交互的，并具有動畫效果，但是他不知道圖形應(yīng)該做成什么樣子。然而，你是有想法的。你在筆記本上畫了幾分鐘，交給Frank一幅草圖，然后開始解釋。
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　為Frank準(zhǔn)備的草圖

　　“圖形展示了數(shù)據(jù)集中最老的，也就是2009年1月五大名人的列表”，你向他解釋道。然后，每一個名人的名字是一個條形，代表了他（或她）這個月在雜志封面上出現(xiàn)的次數(shù)。這樣，哪個名人擁有主導(dǎo)地位就一目了然了。Frank有兩種方式切換到后續(xù)月份：他可以按下播放按鈕，然后坐下欣賞（因為圖形會自動按月顯示）；或者拖動滑塊到指定的月份。當(dāng)圖形從一個月份變換到另外一個月份，新的名字會進(jìn)入排行榜，舊的名字會退出，還有一部分會在列表上上下移動，同時條形的寬度會擴(kuò)展或收縮至更新后的數(shù)值。“好極了！”Frank贊嘆道。然后，他把剩余的3000行數(shù)據(jù)也一并發(fā)送給你。
進(jìn)入，更新，退出……D3為此而生！

進(jìn)入并綁定數(shù)據(jù)

　　假設(shè)你已經(jīng)整理了一些數(shù)據(jù)，為每個月、每個名人都增加了封面，并進(jìn)行了排序。下圖是你整理的前3個月的信息，也就是2009年1月到3月的信息（這些數(shù)值當(dāng)然都是杜撰的）。
　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　前3個月的數(shù)據(jù)

　　以下是關(guān)于這些數(shù)據(jù)的一些解釋。

• 封面人物的數(shù)量并不總是剛好等于50。這是因為有的封面包含兩個名人，這種情況下，該封面算是這兩個人的。

• 1月所有封面上僅有4位名人，大部分期刊都在關(guān)注Brad Pitt和Angelina Jolie的故事。（這就是Frank所說的國民精神所在？）

• 2月類似于1月，除了《世界新聞周刊》，其他雜志的封面人物都是著名的“蝠孩”。

通過JavaScript來組織這些數(shù)據(jù)的一種良好方式是創(chuàng)建一系列對象數(shù)組。例如，1月我們有如下數(shù)組。

var janData = [         
      {name:"Angelina Jolie", covers:20, rank:1},
      {name:"Brad Pitt", covers:18, rank:2},
      {name:"Jennifer Aniston", covers:10, rank:3},
      {name:"Britney Spears", covers:8, rank:4}
];

　　你能看出來為什么這個結(jié)構(gòu)很友好嗎？數(shù)組janData包含4個數(shù)據(jù)對象，每個對象包含一個數(shù)據(jù)點該有的所有信息。我們將在第7章闡述有關(guān)數(shù)據(jù)結(jié)構(gòu)的更多細(xì)節(jié)。
　　好了，要事優(yōu)先：我們需要在頁面上顯示一些圖形。現(xiàn)在，讓我們先忘掉這些條形，并且僅從這些人物的名字開始。我們可以用for循環(huán)為每個名字添加一個文本節(jié)點，但是我們不打算這么做。忘掉for循環(huán)，我們正在考慮數(shù)據(jù)連接，我們想讓文本“進(jìn)入”頁面。
　　具體方法是：我們先為當(dāng)前頁面上的所有文本元素創(chuàng)建一個選擇集，然后為其連接數(shù)據(jù)。但是，等等……我們的頁面是空白的，現(xiàn)在還沒有文本元素！所以，“選擇所有文本元素”到底意味著什么？
此處展現(xiàn)的就是D3進(jìn)入階段的“魔法”——通過d3.selectAll()創(chuàng)建一個并不存在的元素的選擇集。在這種情況下，由于我們想讓文本進(jìn)入頁面，因此可以通過d3.selectAll("p")選擇所有這些還不存在的段落元素。這個概念如下。
　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　一個空的選擇集
　　　　　　　　　　　　　　　　　　　　　　　
　　然后，你在這個選擇集上調(diào)用了兩個方法，分別是data()和enter()。這一記“組合拳”產(chǎn)生了真實的驚人效果：其為數(shù)據(jù)集中的每個數(shù)據(jù)點都創(chuàng)建了一個對象。是的，就是這樣——你不必告訴D3你的數(shù)據(jù)集有多大。你只要將其與一個空選擇集進(jìn)行連接，它就會為你創(chuàng)建正確數(shù)量的對象。
　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　data()和enter()的魔法

　　一開始，這些數(shù)據(jù)只用來占位——文本元素還沒有真正添加到頁面上。為了做到這一點，我們就得用上我們的老朋友a(bǔ)ppend()了。我們將為那些占位數(shù)據(jù)都附加一個段落元素。
　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　用文本元素替換占位數(shù)據(jù)

　　現(xiàn)在，我們已經(jīng)在頁面上放置了4個文本元素，但是其中還沒有任何文字，所以我們的頁面是空白的。如何讓那些名人的姓名顯示在正確的位置呢？奧秘就在data()方法中。該方法實際上執(zhí)行了一次數(shù)據(jù)連接——當(dāng)D3執(zhí)行數(shù)據(jù)連接時，它將數(shù)據(jù)綁定到元素上。所以，每一個文本元素實際上都會有一個數(shù)據(jù)與其關(guān)聯(lián)或綁定，正如上圖所示。
　　D3讓我們可以很容易地綁定數(shù)據(jù)，所以我們可以通過數(shù)據(jù)來告知文本應(yīng)該顯示什么內(nèi)容，以及在哪里顯示：“好了，元素們，看看你們自己的數(shù)據(jù)點。你的名人名字叫什么？Angelina Jolie？好的，這就是我想讓你的文本顯示的內(nèi)容。此外，它應(yīng)該排在第幾個？第1個？好的，你就排到頂上吧！”

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