D3數據連接：進入

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

什么是數據連接

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

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

　　現在，不管你的圖形多么復雜，包含了多少數據，從基礎層面看，涉及的這些形狀（或線、文本標簽、顏色及紋理）都只是在做以下3件事情。

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

• 變換——當你點擊按鈕或調整滑塊，圖形的屬性會按你想看到的最新數據進行更新。

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

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

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

進入并綁定數據

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

　　以下是關于這些數據的一些解釋。

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

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

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

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

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}
];

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

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

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

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