D3數(shù)據(jù)連接：進入-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)公司成立十年來，這條路我們正越走越好，積累了技術(shù)與客戶資源，形成了良好的口碑。為客戶提供成都做網(wǎng)站、網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)頁設(shè)計、主機域名、網(wǎng)絡(luò)營銷、VI設(shè)計、網(wǎng)站改版、漏洞修補等服務(wù)。網(wǎng)站是否美觀、功能強大、用戶體驗好、性價比高、打開快等等，這些對于網(wǎng)站建設(shè)都非常重要，創(chuàng)新互聯(lián)公司通過對建站技術(shù)性的掌握、對創(chuàng)意設(shè)計的研究為客戶提供一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進步。

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

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

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

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

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

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

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

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

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

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

假設(shè)你已經(jīng)整理了一些數(shù)據(jù)，為每個月、每個名人都增加了封面，并進行了排序。下圖是你整理的前3個月的信息，也就是2009年1月到3月的信息（這些數(shù)值當然都是杜撰的）。
　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　前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)的更多細節(jié)。
　　好了，要事優(yōu)先：我們需要在頁面上顯示一些圖形?，F(xiàn)在，讓我們先忘掉這些條形，并且僅從這些人物的名字開始。我們可以用for循環(huán)為每個名字添加一個文本節(jié)點，但是我們不打算這么做。忘掉for循環(huán)，我們正在考慮數(shù)據(jù)連接，我們想讓文本“進入”頁面。
　　具體方法是：我們先為當前頁面上的所有文本元素創(chuàng)建一個選擇集，然后為其連接數(shù)據(jù)。但是，等等……我們的頁面是空白的，現(xiàn)在還沒有文本元素！所以，“選擇所有文本元素”到底意味著什么？
此處展現(xiàn)的就是D3進入階段的“魔法”——通過d3.selectAll()創(chuàng)建一個并不存在的元素的選擇集。在這種情況下，由于我們想讓文本進入頁面，因此可以通過d3.selectAll("p")選擇所有這些還不存在的段落元素。這個概念如下。
　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　一個空的選擇集
　　　　　　　　　　　　　　　　　　　　　　　
　　然后，你在這個選擇集上調(diào)用了兩個方法，分別是data()和enter()。這一記“組合拳”產(chǎn)生了真實的驚人效果：其為數(shù)據(jù)集中的每個數(shù)據(jù)點都創(chuàng)建了一個對象。是的，就是這樣——你不必告訴D3你的數(shù)據(jù)集有多大。你只要將其與一個空選擇集進行連接，它就會為你創(chuàng)建正確數(shù)量的對象。
　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　data()和enter()的魔法

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

現(xiàn)在，我們已經(jīng)在頁面上放置了4個文本元素，但是其中還沒有任何文字，所以我們的頁面是空白的。如何讓那些名人的姓名顯示在正確的位置呢？奧秘就在data()方法中。該方法實際上執(zhí)行了一次數(shù)據(jù)連接——當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ù)可視化利器從入門到進階》，點此鏈接可在博文視點官網(wǎng)查看此書。
　　　　　　　　　　　　　　　　　　　　
　　想及時獲得更多精彩文章，可在微信中搜索“博文視點”或者掃描下方二維碼并關(guān)注。
　　　　　　　　　　　　　　　　　　　　　　　

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

網(wǎng)站標題：D3數(shù)據(jù)連接：進入-創(chuàng)新互聯(lián)
URL地址：http://muchs.cn/article40/dpdhho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、做網(wǎng)站、品牌網(wǎng)站制作、軟件開發(fā)、網(wǎng)站排名、動態(tài)網(wǎng)站

廣告

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