D3 是什么？
D3 的全稱是（Data-Driven Documents），顧名思義可以知道是一個被數據驅動的文檔。聽名字有點抽象，說簡單一點，其實就是一個 JavaScript 的函數庫，使用它主要是用來做 數據可視化 的。
JavaScript 文件的后綴名通常為 .js，故 D3 也常使用 D3.js 稱呼。D3 提供了各種簡單易用的函數，大大簡化了 JavaScript 操作數據的難度。由于它本質上是 JavaScript ，所以用 JavaScript 也是可以實現所有功能的，但它能大大減小你的工作量，尤其是在數據可視化方面，D3 已經將生成可視化的復雜步驟精簡到了幾個簡單的函數，你只需要輸入幾個簡單的數據，就能夠轉換為各種絢麗的圖形。有過 JavaScript 基礎的朋友一定很容易理解它。
為什么要做數據可視化？
現在有一組數據， 【 4 ， 32 ， 15 ， 16 ， 42 ， 25 】 ，你能一眼看出它們的大小關系嗎？當然這里的數據不算多，有那眼疾手快的家伙站出來說我能一眼看出來！但更直觀的是用圖形顯示，如下圖
通過圖形的顯示，能很清楚地知道他們的大小關系。當然，D3 能力遠不止如此，這只是一個很小的應用。把枯燥乏味復雜的數據，用簡單明了的圖形表示出來，這就是 數據可視化。
D3 的 安裝
D3 是一個 JavaScript 函數庫，并不需要通常所說的“安裝”。它只有一個文件，在 HTML 中引用即可。有兩種方法：
-
下載 D3.js 的文件
D3.zip - 直接包含網絡的鏈接
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
這種方法比較簡單，但要保持網絡連接有效。
第一個程序 hello world
- 首先，我們實現用 HTML 來實現 hello world,代碼如下：
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
</body>
</html>
運行該 html 文件,會在瀏覽器里輸出
Hello World 1
Hello World 2
- 對于上面輸出的內容，如果想用 JavaScript 來更改這兩行文字，該怎么辦？我們會將代碼改為以下形式：
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
<script>
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs.item(i);
paragraph.innerHTML = "I like dog.";
}
</script>
</body>
</html>
這個時候我們可以看見瀏覽器上輸出
I like dog.
I like dog.
- 現在我們使用 D3 來實現更改 hello world ，代碼如下：
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
d3.select("body").selectAll("p").text("I like dog.");
</script>
</body>
</html>
在瀏覽器上的運行結果為：
I like dog.
I like dog.
** 我們會發現使用D3使用了非常簡潔的代碼實現了同樣的功能。不錯，其實 D3.js 中的所有功能在 JavaScript 中都能實現，它僅僅是一個函數庫而已。D3 所做的事就是減輕你的工作量，以及使你的代碼十分簡單易懂。**
- 接下來，我們來使用 D3 改變輸出字體的顏色和大小
//選擇<body>中所有的<p>，其文本內容為 www.ourd3js.com，選擇集保存在變量 p 中
const p = d3.select("body")
.selectAll("p")
.text("I like ");
//修改段落的顏色和字體大小
p.style("color", "red")
.style("font-size", "72px");
上面的代碼是先將選中的元素賦值給變量 p，然后通過變量 p 來改變樣式，這樣可以使輸出的內容成為你想要的樣式。
通過以上的代碼相信大家都可以看出 D3 有多方便了吧，這里我們介紹的只是最基礎的 D3 的用法，大家如果有興趣還可以深入學習，以下提供幾個學習網站：
- 官方網站：
http://d3js.org/ - OUR D3.JS 數據可視化專題站
http://www.ourd3js.com/
