d3.js:數據可視化利器之快速入門

hello,data!

在進入d3.js以前，咱們先用一個小例子回顧一下將數據可視化的基本流程。

• 任務

用橫向柱狀圖來直觀顯示如下數據：

1. var data = [10,15,23,78,57,29,34,71];

簡單地思考一下，要完成這個任務有兩個問題須要解決：

1. 用什麼可視元素來表現橫向柱？
2. 數據對應到可視元素的什麼屬性？

這個不算困難，咱們使用HTML的DIV元素來實現，代碼參見http://***/course/54fd40cfe564e50d50dcf284/：快速入門第一頁

試着改變一下示例代碼中變量data的內容，體會一下數據驅動 的含義。

數據可視化與d3.js

將數據以圖形的方式表現出來，這個過程就是數據可視化。

沒錯，一圖勝千言。咱們很難從枯燥的數字中發現規律與異常，但很善於從圖形 中發現模式。隨着人類所擁有數據規模的日益擴大，數據可視化逐漸成爲一個重要 的不可或缺的技術手段。

d3.js是一個優秀的數據可視化庫，可讓咱們方便快捷地實現數據到圖形的變換。 不過，在開始後續的教程以前，先打個預防針，但願你不要誤解d3.js ：

• d3.js不是一個圖形繪製庫

不少人驚詫於這一點，但不得不提。d3依賴於標準的web技術來繪製可視化元素，好比 HTML、SVG、CSS。使用d3須要咱們對這些標準技術有基礎的瞭解。

• d3.js是一個基於集合概念的DOM操做庫

d3不是圖形繪製庫，但它對DOM操做進行了封裝。和jQuery相似，d3依賴於選擇符選 中一組元素，創建一個集合，而後使用集合對象的方法操做DOM。

• d3.js的大量功能集中在數據處理方面

要將數據映射到圖形，有不少瑣碎的工做，好比數據範圍的變換、插值的計算、佈局的 計算等等。d3.js的大量功能是集中在這樣的數據處理方面的。

• d3.js的核心是對數據和可視化元素的匹配

d3將數據可視化抽象爲數據與可視化元素的匹配，一個數據對應一個可視化元素，一個 數值對應一個可視化元素的屬性。d3封裝了這個匹配的複雜過程，讓咱們得以簡單的 經過聲明數據和可視化元素來完成數據可視化的任務。

d3的四把斧：hello,d3

在HTML文件中引入d3.js後，咱們就得到了一個全局變量：d3。d3.js 的功能就經過這個對象暴露出來。

咱們使用d3的API重寫前面的示例，代碼已經預置到→_→。

這個例子展現了d3.js實現數據可視化的典型理念：基於集合運算的 聲明式數據可視化。

請你注意上圖中使用d3時經典的四把斧：d3老是要求使用者聲明兩個集合：DOM對象集和數據集， 並根據集合運算實施數據與DOM對象的匹配，最後經過修改匹配的DOM對象來得到 可視化的效果。

d3第1斧：聲明DOM對象集

d3的數據可視化流程老是從選中一組DOM元素創建一個集合對象開始。 在示例中，咱們經過：

1. var selection1 = d3.select("#barChart").selectAll(".bar");

試圖在文檔DOM樹中選擇div#barChart中的全部div.bar。 咱們將這一步返回的DOM集合保存到變量selection1中。

你應該會注意到，這是一個空集合！

這有點意思。

• d3容許聲明一個空集合

在jQuery中，若是咱們的選擇符沒有選中任何HTML元素，那麼後面的全部操做都沒有意義了。 可是，d3容許咱們選不中任何元素來來創建一個空集合。

由於，d3還有第2斧，用數據來影響這個空集合。

size()方法返回集合中全部DOM元素的數量。在→_→的示例中，你能夠看到，selection1 確實是一個空集合：它有0個DOM元素。

d3第2斧：聲明數據集

咱們在第一步返回的selection1上執行data()方法聲明要展現的數據：

1. var selection2 = selection1.data(data);

咱們知道這個數據集不是空的，它有8個數據項。在這一步，d3將數據集和DOM 對象集進行比較，返回一個新的集合selection2。

咱們看到，selection2的DOM元素數量也是0。

匹配計算

data()方法執行時對數據集和DOM元素集進行了匹配計算， 直接返回的結果就是兩個集合的共有部分。因爲DOM元素集是空的，因此結 果必定也沒有任何DOM元素：

可是，匹配計算的結果有兩個重要的方法，讓咱們能夠得到數據集合DOM元素集的 差別在哪裏：

• enter() : 得到數據集中比DOM元素集中多出來的數據
• exit() ：得到DOM元素集中比數據集中多出來的數據

示例（http://***/course/54fd40cfe564e50d50dcf284/：快速入門第五頁）顯示了經過data()操做，目前得到的選擇集中成員數目仍是0。

d3第3斧：得到結果集

繼續使用集合的enter()方法，咱們能夠獲取缺失的DOM對象集合（以數據集爲 對比基準）：

1. var selection3 = selection2.enter();

因爲原始DOM集合爲空，而數據集有8項，那麼selection3中也將有8項描述8個缺失的 DOM對象：

d3第4斧：實施DOM操做

使用集合的append()方法，咱們建立缺失的DOM對象：

1. var selection4 = selection3.append("div");

這時selection4已是有8個div元素的集合了，在這個集合上咱們使用text() 方法設置每一個元素的文本內容：

1. selection4.text(function(d){return d;});

你注意到text()方法的參數是一個函數！讓我解釋一下。

selection4是一個集合，內有8個div元素，咱們通過以前的三斧，這每一個元素都已經有對應 的數據了（d3負責管理其對應關係），好比，第一個DIV元素對應的是10，第二個DIV元素對應 的是15......

每當集合的方法被調用時，它都檢查傳入的參數，若是傳入的參數是一個函數，d3就對集 閤中的每一個DOM元素執行一次這個函數，並傳入這個DOM元素對應的數據。

咱們接着使用classed()方法設置每一個元素的CSS類爲"bar"：

1. selection4.classed("bar",true)

最後使用width()方法使用每一個元素對應的數據，設置其寬度。這個能夠理解了吧？

參考資料：http://***/