為什么要進(jìn)行數(shù)據(jù)可視化
一圖勝千言捎拯。從今天開始可視化庫的第一章-入門篇咯??
什么是D3.js
D3指的是Data-Driven Documents，js即Javascript惊豺，是后綴名。先看看官網(wǎng)上對(duì)D3.js庫的定義：
D3.js is a JavaScript library for manipulating documents based on data.D3 helps you bring data to life using HTML, SVG, and CSS.
D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
翻譯成中文大致意思為：
D3.js 是基于數(shù)據(jù)驅(qū)動(dòng)文檔工作方式的一款JavaScript函數(shù)庫禽作，主要用于網(wǎng)頁作圖尸昧、生成互動(dòng)圖形，是最流行的可視化庫之一旷偿。D3使你有能力借助HTML烹俗，SVG和CSS來生動(dòng)地可視化各種數(shù)據(jù)
D3不需要你使用某個(gè)特定的框架，它的重點(diǎn)在于對(duì)現(xiàn)代主流瀏覽器的兼容萍程，同時(shí)結(jié)合了強(qiáng)大的可視化組件幢妄，以數(shù)據(jù)驅(qū)動(dòng)的方式去操作DOM
通過上述的表達(dá)，總結(jié)D3.js庫的幾大特點(diǎn)：
一款基于JavaScript的函數(shù)庫
借助HTML茫负、SVG和CSS等實(shí)現(xiàn)可視化
組件強(qiáng)大蕉鸳，通過數(shù)據(jù)驅(qū)動(dòng)的方式來操作DOM
安裝
- 下載最新的版本V5.16.0。解壓后忍法，在HTML文件中包含相關(guān)的
js文件即可
- 通過采用<script>標(biāo)簽實(shí)現(xiàn)潮尝，在頁面的代碼中插入如下代碼
<script src="http://d3js.org/d3.v5.min.js"></script>
注意：現(xiàn)在已經(jīng)是V5版本。V5和V3的很多語法還是有區(qū)別的饿序，后期所有的文檔都是基于V5勉失。
預(yù)備知識(shí)
如果想通過D3來實(shí)現(xiàn)數(shù)據(jù)的可視化，需要的預(yù)備知識(shí)：
HTML：超文本標(biāo)記語言原探，用于設(shè)定網(wǎng)頁的內(nèi)容
CSS：層疊樣式表乱凿，用于設(shè)定網(wǎng)頁的樣式
JavaScript：流行的前端語言，用于設(shè)定網(wǎng)頁的行為
DOM：文檔對(duì)象模型咽弦，用于修改文檔的內(nèi)容和結(jié)果
SVG：可縮放矢量圖形徒蟆，用于繪制可視化的圖形
以上知識(shí)點(diǎn)沒有必要掌握的非常精通，建議到W3school快速入門型型，了解基本概念后专，再看幾個(gè)案例demo，以后遇到不懂的地方可以進(jìn)行查看输莺。
編程環(huán)境
D3.js是在網(wǎng)頁上的可視化制圖，常用的網(wǎng)頁制作工具：
IDE的選擇：
VS code裸诽、Sublime Text嫂用、Notepad++等，推薦使用VS code瀏覽器：
D3支持的主流瀏覽器不包括IE8及以前的版本丈冬。D3測(cè)試了Firefox嘱函、Chrome、Safari埂蕊、Opera和IE9往弓。D3的大部分組件可以在舊的瀏覽器運(yùn)行疏唾。
Chrome是最好的選擇。強(qiáng)大的調(diào)試功能會(huì)讓你事半功倍函似！推薦瀏覽使用chrome的另一個(gè)好處是查找資料更多更全面
- 服務(wù)器軟件：
Apache槐脏、Tomcat等，這個(gè)是非必須的撇寞。但是有些函數(shù)需要放置于服務(wù)器目錄下顿天，才能正常運(yùn)行，比如關(guān)于導(dǎo)入json文件的函數(shù)
學(xué)習(xí)網(wǎng)站
以下是幾個(gè)學(xué)習(xí)網(wǎng)頁制作和D3的網(wǎng)站：
- W3school
W3school蔑担，非常全面的網(wǎng)站建設(shè)課程牌废，從基礎(chǔ)的 HTML 到 CSS，乃至進(jìn)階的 XML啤握、SQL鸟缕、JS、PHP 等
- HTML+CSS快速入門
初識(shí)HTML(5)+CSS(3)-2020升級(jí)版：HTML+CSS快速入門-2020升級(jí)版
- SVG
可縮放矢量圖形排抬，即SVG懂从，是W3C XML的分支語言之一，用于標(biāo)記可縮放的矢量圖形
SVG-菜鳥課程：SVG-菜鳥課程
SVG|MDN：SVG|MDN
SVG圖像入門教程|阮一峰老師：SVG圖像入門教程|阮一峰老師
- D3.js
第一個(gè)推薦的網(wǎng)站肯定是官網(wǎng)畜埋，包含很多的示例和API文檔莫绣，都是根據(jù)最新的版本發(fā)布的
D3官網(wǎng)：https://d3js.org/
D3.js的V5版本入門教程：D3.js的V5版本入門教程
慕課網(wǎng)-使用D3制作圖表：慕課網(wǎng)-使用D3制作圖表
數(shù)據(jù)可視化編程-使用D3.js：數(shù)據(jù)可視化編程-使用D3.js-清華大學(xué)
Data Visualization with D3.js - Full Tutorial Course：Data Visualization with D3.js - Full Tutorial Course，油管上的一個(gè)實(shí)例演示課程悠鞍，需要科學(xué)上網(wǎng)才能觀看
第一個(gè)D3.js的程序
代碼解釋：
在
body標(biāo)簽中放入兩個(gè)p標(biāo)簽蟆湖，沒有寫入內(nèi)容定義變量
p泪掀，通過鏈?zhǔn)秸{(diào)用獲取到全部的p元素，即selectAll()方法通過
text()方法來寫入內(nèi)容，進(jìn)行輸出
