一、D3畫圖簡介
D3 是最流行的可視化庫之一，它被很多其他的表格插件所使用。它允許綁定任意數據到DOM，然后將數據驅動轉換應用到Document中。你可以使用它用一個數組創建基本的HTML表格，或是利用它的流體過度和交互，用相似的數據創建驚人的SVG條形圖。原諒我上面這句是從網上抄的，語文不太好。反正說白了，D3就是一個用來在web界面畫圖的庫。有了它我們畫各種圖形和坐標軸都更加方便了。
二、使用的基本函數
1. 元素選擇函數
在D3中對HTML元素選取主要用到select和selectAll兩個函數。select用於選取單個元素，selectAll用於選取頁面中所有的該元素。
函數原型：d3.select()
函數參數：HTML元素
函數返回值：選擇的HTML元素對象。
示例： var p = d3.select("p"); //選擇頁面中的第一個<p>元素
函數原型：d3.selectAll()
函數參數：HTML元素
函數返回值：選擇的HTML元素對象。
示例： var p = d3.selectAll("p"); //選擇頁面中所有的<p>元素
使用方式列舉：
（1）選取單個元素
<body>
<p></p>
<body>
d3.select("p">
.text("測試"); //輸出：測試
（2）選取所有元素
<body>
<p></p>
<p></p>
</body>
d3.selectAll("p")
.text(function(v,i){
return "測試" + i;
})
//輸出: 測試0
// 測試1
（3）根據id選取元素
<body>
<p></p>
<p id="ceshi"></p>
</body>
d3.select("#ceshi")
.text("ID選取"); //輸出：ID選取
（4）根據class選取元素
<body>
<p></p>
<p class="ceshi"></p>
</body>
d3.select(".ceshi")
.text("class測試")；
2. 數據綁定函數
（1）datum函數
函數原型：datum()
函數功能：綁定單個數據到選擇集
示例：
<body>
<p></p>
<p></p>
</body>
var str = "ceshi"
d3.selsetAll("body")
.datum(str)
.text (function(v,i){
return "第" + i + "個元素是" + v;
})
//輸出：
//第0個元素是ceshi
//第1個元素是ceshi
（2）data函數
函數原型：data()
函數功能：將一個數組綁定到選擇集
示例：
<body>
<p></p>
<p></p>
</body>
var str = ["ceshi", "data"]
d3.selsetAll("body")
.datum(str)
.text (function(v,i){
return "第" + i + "個元素是" + v;
})
//輸出：
//第0個元素是ceshi
//第1個元素是data
3. 元素添加函數
函數原型：append()
函數功能：在選擇集后面添加元素
示例：
<body>
<p>段落1</p>
</body>
d3.select(p)
.append("p")
.text("段落2");
//顯示：
//段落1
//段落2
函數原型：insert()
函數功能：在選擇集前面添加元素
示例：
<body>
<p>段落1</p>
</body>
d3.select(p)
.insert("p")
.text("段落2");
//顯示：
//段落2
//段落1
4. 元素移除函數
函數原型：remove()
函數功能：移除元素
示例：
<body>
<p>段落1</p>
<p>段落2</p>
</body>
d3.select(p)
.remove();
//顯示：
//段落2
這章就先介紹到這里，下一章將會將一些基本圖形的畫法。有點累了，下班回家。