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

成都創(chuàng)新互聯(lián)公司是一家以重慶網(wǎng)站建設(shè)公司、網(wǎng)頁設(shè)計(jì)、品牌設(shè)計(jì)、軟件運(yùn)維、seo優(yōu)化、小程序App開發(fā)等移動開發(fā)為一體互聯(lián)網(wǎng)公司。已累計(jì)為汽車玻璃修復(fù)等眾行業(yè)中小客戶提供優(yōu)質(zhì)的互聯(lián)網(wǎng)建站和軟件開發(fā)服務(wù)。

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

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

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

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

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

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

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

就是這樣的3件事情。一個交互式圖形就像一座劇院，當(dāng)演出的時候，演員進(jìn)入舞臺，表演節(jié)目，然后退場。在數(shù)據(jù)可視化中，形狀——或更籠統(tǒng)地說，圖形元素——進(jìn)入頁面，更新自身，然后退出。
　　數(shù)據(jù)連接充分利用了上述的初步想法。使用時，可以通過指令讓圖形元素進(jìn)入、更新和退出。（實(shí)際上，我直接從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ù)連接基本概念各方面知識點(diǎn)的示例。為了構(gòu)建之前那幅人口分布條形圖，我們也會引入數(shù)據(jù)連接，但不會描述得那么完整。所以，雖然有點(diǎn)跑題，但是引入一個新示例將有助于我們研究數(shù)據(jù)連接的方方面面。
　　本文只涉及數(shù)據(jù)連接知識的一部分，重點(diǎn)在其整個生命周期中關(guān)于“進(jìn)入”的部分。在后面的推送中，我們會用同樣的示例來詳細(xì)闡述“更新”和“退出”部分。
　　好了，我們開始。
　　假設(shè)你有一個朋友，名字叫Frank。Frank有一個癖好是喜歡看明星八卦雜志和各種小道報刊?！睹绹芸贰ⅰ度宋铩芳啊秶艺{(diào)查者》等，就是那種你在雜貨店排隊(duì)結(jié)賬，百無聊賴時會瞥見的刊物，F(xiàn)rank一定會有強(qiáng)烈的興趣。問題是，他其實(shí)并不關(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一幅草圖，然后開始解釋。
　　　　　　　　　　　　　　　
　想及時獲得更多精彩文章，可在微信中搜索“博文視點(diǎn)”或者掃描下方二維碼并關(guān)注。
　　　　　　　　　　　　　　　　　　　　　　

分享名稱：D3數(shù)據(jù)連接：進(jìn)入
URL地址：http://www.rwnh.cn/article46/jsdphg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站制作、網(wǎng)站排名、域名注冊、網(wǎng)頁設(shè)計(jì)公司、自適應(yīng)網(wǎng)站

廣告

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