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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

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

溫馨提示

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

評論

0/150

提交評論