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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 封面人物的數(shù)量并不總是剛好等于50。這是因?yàn)橛械姆饷姘瑑蓚€(gè)名人，這種情況下，該封面算是這兩個(gè)人的。

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

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

通過(guò)JavaScript來(lái)組織這些數(shù)據(jù)的一種良好方式是創(chuàng)建一系列對(duì)象數(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}
];

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

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

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

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

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

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

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

廣告

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