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中對應索引位置的元素值

// .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()方法的簡單總結,便於快速入門,D3的高深遠不止於此。拙筆之作,不對之處望海涵 :)

更多data()方法精妙解釋和高級用例: http://alignedleft.com/tutorials/d3/binding-data 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM