數(shù)據(jù)可視化基礎(chǔ)數(shù)據(jù)可視化基礎(chǔ)第五章-D3.js介紹_第1頁
數(shù)據(jù)可視化基礎(chǔ)數(shù)據(jù)可視化基礎(chǔ)第五章-D3.js介紹_第2頁
數(shù)據(jù)可視化基礎(chǔ)數(shù)據(jù)可視化基礎(chǔ)第五章-D3.js介紹_第3頁
數(shù)據(jù)可視化基礎(chǔ)數(shù)據(jù)可視化基礎(chǔ)第五章-D3.js介紹_第4頁
數(shù)據(jù)可視化基礎(chǔ)數(shù)據(jù)可視化基礎(chǔ)第五章-D3.js介紹_第5頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1第五課D3.js介紹學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)了解D3.js的基本概念通過一個(gè)快速上手的案例，了解如何通過D3js完成一個(gè)基本圖表能能力目標(biāo)能夠根據(jù)實(shí)際場(chǎng)景選擇合適的可視化工具能夠上手QuickBI能夠通過D3完成簡(jiǎn)單的圖形2D3是什么D3的全稱是(Data-DrivenDocuments)，從名字直譯過來是一個(gè)被數(shù)據(jù)驅(qū)動(dòng)的文檔。聽起來比較抽象，其實(shí)就是一個(gè)開源的JavaScript的函數(shù)庫，提供了各種簡(jiǎn)單易用的函數(shù)，大大簡(jiǎn)化了JavaScript完成可視化操作的難度。JavaScript文件的后綴名通常為.js，故D3也常使用D3.js稱呼。D3提供了各種簡(jiǎn)單易用的函數(shù)，大大簡(jiǎn)化了JavaScript操作數(shù)據(jù)的難度。能大大減小工作量，尤其是在數(shù)據(jù)可視化方面，D3已經(jīng)將生成可視化的復(fù)雜步驟精簡(jiǎn)到了幾個(gè)簡(jiǎn)單的函數(shù)，你只需要輸入幾個(gè)簡(jiǎn)單的數(shù)據(jù)，就能夠轉(zhuǎn)換為各種絢麗的圖形。有過JavaScript基礎(chǔ)的就可以很快掌握。D3的官網(wǎng)是/,在Document的鏈接中，可以看到官方的API手冊(cè)，也有部分翻譯過來的中文手冊(cè)。是我們查看各種API用法的最權(quán)威資料。在Example鏈接中，是用D3.js完成的各種圖形的樣例，也是我們學(xué)習(xí)D3中非常重要的學(xué)習(xí)資源。當(dāng)然還有非常多的D3的案例的資源，包括/mbostock是D3的創(chuàng)始人MikeBostock的博客，一直在不斷更新非常多的用D3完成的圖表案例。了解基本語法，從不斷模仿案例中，進(jìn)一步理解各類API,并靈活創(chuàng)建自己的圖表，是學(xué)習(xí)D3的有效路徑。D3的安裝和使用D3類庫的文件名就是d3.js,只有一個(gè)文件，所有的對(duì)象，函數(shù)和變量都寫在此文件中，3因此所謂的安裝就是在<script>中引用文件即可。目前最新版本的D3是V4版本，我們實(shí)驗(yàn)和演示中，都使用V4版本。引用有兩種方法，如果網(wǎng)絡(luò)條件好，可以直接從官網(wǎng)引用。或是將庫文件下載下來，放在工程目錄中引用。O下載文件的方式可以在官網(wǎng)主頁上找到最新版本的下載鏈接，下載d3.zip文件，解壓后的三個(gè)文件包括d3.js完整版，開發(fā)時(shí)候?yàn)榱朔奖阏{(diào)試，建議用此文件d3.min.js壓縮版，去掉了空格等字符，功能一樣，了瀏覽器的讀取速度更快，發(fā)布時(shí)應(yīng)該用此版本LICENSE版權(quán)許可證文件將解壓縮后的文件至于工程目錄下，目錄結(jié)構(gòu)推薦放在獨(dú)立的d3子目錄中，在我們的演示和實(shí)驗(yàn)環(huán)境中如下。在實(shí)際的html文件中，通過下面的代碼引入d3的庫<head><metacharset="UTF-8"><!--Version4.4.4--><scripttype="text/javascript"src="../js/d3/d3.min.js"></script></head>O網(wǎng)絡(luò)引用也可以直接通過網(wǎng)絡(luò)引用d3庫，這樣就無須下載，很方便，但是一定要網(wǎng)絡(luò)條件好才行。<head><metacharset="UTF-8"><!--Version4.4.4--><scripttype="text/javascript"src="../js/d3/d3.min.js"></script></head>O搭建服務(wù)器4T瀏覽器可以直接打開HTML文件，但是有些瀏覽器會(huì)限制JavaScript加載本地文件，因此如果不搭建服務(wù)器，使用D3的某些請(qǐng)求文件的函數(shù)就會(huì)出現(xiàn)錯(cuò)誤。因此建議把所有的網(wǎng)頁文件都放到Web服務(wù)器上進(jìn)行測(cè)試。搭建服務(wù)器非常簡(jiǎn)單,可以下載安裝ApacheHTTPServer?；蚴怯肞ython命令開啟簡(jiǎn)單的Http服務(wù)器PythonmSimpleHTTPServer我們?cè)诒菊n程中，采用HTML5的IDE開發(fā)工具Hbuilder(官網(wǎng)https://dcloud.io/)，可以及時(shí)查看瀏覽器顯示，并內(nèi)置了Web服務(wù)器，因此不用再搭建服務(wù)器了。HelloHelloWorld多數(shù)編程語言的第一步都是在屏幕上輸出“HelloWorld”字符串，我們也不免俗，第一個(gè)D3的程序就是將屏幕上的HelloWorld字符串改成WelcomeD3.js的字符串<body><p>HelloWorld</p><p>HelloWorld</p></body><scripttype="text/javascript">d3.select("body").selectAll("p").text("welcomeD3.js");</script>這個(gè)例子里面就是通過select選擇器，選擇了HTML里面的p元素，并修改其中的文字為“WelcomeD3.js”.5選擇集選擇集上面的D3的例子中，最重要的部分就是select函數(shù)了。這是D3中用來選擇HTML元素的函數(shù)，包括select和selectAll這兩種方式。select:返回匹配選擇器中的第一個(gè)元素selectAll：返回匹配選擇器中的所有元素選擇器是select和selectAll的參數(shù)，指定應(yīng)當(dāng)選擇文檔中的哪些元素，這里我們用的是CSS選擇器，比方////選擇body元素//選擇id為important的元素//選擇類為content的第一個(gè)元素d3.select(“body”);d3.select(“#important”);d3.select(“.content”);如果符合選擇器的元素有多個(gè)，但是select只選擇第一個(gè)，如果要選擇所有元素，就使用selectAll。////選擇所有的p元素//選擇類為content的元素//選擇ul中所有的li元素ctAllpd3.selectAll(“ulli”);選擇集通過d3.select和d3.selectAll返回的對(duì)象成為選擇集(selection)，增刪網(wǎng)頁中的元素都要使用選擇集。比方說，我們?cè)贖elloWorld的例子中，通過text函數(shù)，更新p元素里的文字。SelectionSelection.text(“WelcomeD3.js”);還可以通過attr設(shè)定和獲取屬性。selectionselection.attr("style","color:red;fon

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論