D3 data

D3.js data() 方法詳解

Binding data（數據綁定）

　　D3各類圖表的做用體如今將數據(Data)轉換成可視化的過程。

　　好比將一個月的氣溫數據，經過樹形圖來展示，可以直觀的看到氣溫走勢，下個月還需不須要穿秋褲 :)

　　咱們經過D3的 selection.data() 方法來將 data 綁定到 DOM 元素。所以，一個綁定過程的必要條件既是：data 和 DOM目標元素（沒有目標元素，你還bind個卵~）。

 

從Data提及...

　　D3仍是很聰明的，能夠處理多種data類型，像數組、字符串、對象類型。一樣能夠優雅的接受JSON，更牛B的是它擁有本身的內部方法，能夠直接加載CSV文件（固然須要load CSV文件就不是咱們在桌面建立個index.html而後用chrome打開那麼easy了，你須要一個應用server，經過http仍是https來獲取CSV並加載了）。

　　這裏咱們先準備一個簡單的數組吧

var dataset = [1, 2, 3, 4, 5];

 

　　既然上面都有一行code了，看了免不了還要寫點代碼了。咱們要把上面的數組跟誰綁定呢？

d3.select("body").selectAll("p")

　　你會說p都沒append，哪來selectAll("p")，這是個問題，D3固然考慮到這一點了啊

d3.select("body").selectAll("p")
                 .data(dataset)
                 .enter()
                 .append("p")
                 .text("say say say you love me");

　　enter()是個神奇的方法，運行上面的代碼，你的頁面應該打印出5行 "say say say you love me", 不顧一切，狠狠愛（有沒有一種忍不住唱出了的衝動）

d3.select("body")         // 查找DOM中的body元素，返回body的引用
 
.selectAll("p")            //選中DOM中的全部p標籤，當DOM中不存在p時，那麼這個返回值將是null
 
.data(dataset)            //計算而且傳遞dataset的紙，數組長度爲5，所以全部通過此節點的處理過程將處理5次,每次對應數組中不一樣的元素值
 
.enter()                    //建立新的DOM元素，當dataset的數據被傳遞至此，數組中的元素個數多於DOM中已有的p個數，enter()將會建立新的p元素來補充（推薦Google一下enter()和exit()具體使用方法）
 
.append("p")             //這裏的p固然就是不夠分時就建立一個的意思啦。。。
 
.text("say say say you love me") //這個誰給解釋一下 :o　

使用你的Data...

　　完成了上面的邏輯，你應該會問 「本吊load上了data，僅僅只是for-each一下？」

　　非也，下面咱們開始使用上面load的數據

d3.select("body").selectAll("p")
                 .data(dataset)
                 .enter()
                 .append("p")
                 .text(function(d){return "say say say you love me "+d+" times"}); //方法中的參數d既是dataset中對應索引位置的元素值<br><br>// .text(function(d, i){return "sample"})   這裏能夠看到另外一個參數i, i在此處的值表示的是當前 d 元素在 dataset 中的索引位置

　　經過上面一段代碼，任什麼時候候，在調用data()方法以後，建立匿名方法，並將d做爲參數傳遞進去，data() 方法將能夠保證每次傳遞進去的參數 d 是 dataset 中對應的元素。好吧，我認可上面text()中定義的匿名函數有點low，不夠炫酷。。。

　　在text()方法中，心細的你也許會有疑問，爲何不直接寫 .text("say say say you love me "+d+" times"); 緣由是D3的許多方法，包括 .text() / .attr() 等它們均可以將一個方法做爲參數，固然參數也能夠是一個字符串(不包含運算的)。

 

關於除 array 之外的數據結構處理方式在實際應用中使用的並非不少，好比簡單的 key/value 對象類型，咱們能夠經過 d3.keys(data) 方法來獲取各個value值。實際應用中仍是須要根據本身的實際需求來組織便於處理的數據結構。

以上僅僅是一個D3內置data()方法的簡單總結