首先了解下啥是D3
D3.js is a JavaScript library for manipulating documents based on data.
官網上第一句就是這個，也就是個js文件，下下來也不過幾百k，但是聽說可以畫出各種酷炫圖形去撩妹，所以打算學（zhuang）習（bi）一下。
其次要會HTML和JavaScript
舉個簡單的例子，畫一個柱狀圖,數據長這樣：var data = [4, 8, 15, 16, 23, 42];
用HTML寫出來是這樣滴
<!DOCTYPE html>
<style>
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<div class="chart">
<div style="width: 40px;">4</div>
<div style="width: 80px;">8</div>
<div style="width: 150px;">15</div>
<div style="width: 160px;">16</div>
<div style="width: 230px;">23</div>
<div style="width: 420px;">42</div>
</div>
然后要是用D3，感覺的確是簡潔了一些。只要你會引個js文件，可以從網上下，也可以直接連url，建議還是下一個，有時候官網都連不上，到時候不知道是自己寫錯了還是網沒連上。
<script src="https://d3js.org/d3.v4.min.js"></script>
繪制圖形的代碼
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return d * 10 + "px"; })
.text(function(d) { return d; });
第一步 用class選擇器選出圖表的容器
var chart = d3.select(".chart");
第二步 通過定義我們將用來展示數據的容器來進行數據連接的初始化（別問我為啥這句話讀起來不通順，因為我也不懂啥意思，強行翻譯的文檔，看代碼就懂了，囧）
var bar = chart.selectAll("div");
據文檔所說，這個數據連接是可以創建、更新或者刪除元素的，只要你想弄。文檔說這種模式可能有點奇怪，我也覺得是有一點難理解。但是總的來說，可以把這種模式認為是你想讓數據元素以什么形式存在。這樣可以把靜態的和動態的數據的代碼寫的幾乎一樣，的確省事兒。
解釋下那個
selectAll
//append一個元素
svg.append("circle")
.attr("cx", d.x)
.attr("cy", d.y)
.attr("r", 2.5);
//不用寫循環就能定義好所有元素
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 2.5);
But what’s with the
selectAll("circle")? Why do you have to select elements that you know don’t exist in order to create new ones? WAT. Here’s the deal. Instead of telling D3 how to do something, tell D3 what you want.
甭管我叫你干啥，關鍵是我想要你干啥。D3你得自己揣摩。沒辦法我是新手，D3你多擔待。
第三步 連接數據到剛才指定的選擇的容器
var barUpdate = bar.data(data);
第四步，數據入棧
var barEnter = barUpdate.enter().append("div");
第五步，設置下直方圖的參數
barEnter.style("width", function(d) { return d * 10 + "px"; });
第六步，設置下文字
barEnter.text(function(d) { return d; });
又據文檔說，D3的選擇器還有其他功能。反正我覺得這地方和Beautifulsoup的各種選擇器挺像的，反正HTML和XML的樹形結構一長就是場噩夢。寫爬蟲那會兒的xpath要是用絕對路徑都能嚇死人。
文檔還說barEnter.style("width", function(d) { return d * 10 + "px"; });中的d * 10是神來之筆，其實就是控制下圖形相對大小，從而相對美觀。關于這點，還可以有一些其他改進。
