學習筆記（一）——數據可視化D3.js

時間 2019-11-18

原文原文鏈接

1、簡介和安裝

簡介

D3 的全稱是（Data-Driven Documents），顧名思義能夠知道是一個被數據驅動的文檔。D3.js是一個基於數據處理文檔的JavaScript庫。D3幫助咱們使用HTML，SVG和CSS將數據帶入生活。D3強調網絡標準，可讓您充分利用現代瀏覽器的功能，而無需將本身綁定到專有框架，將強大的可視化組件和數據驅動的方法結合到DOM操做中。javascript

安裝使用

1：下載d3.js文件：http://github.com/mbostock/d3/releases/download/v3.4.8/d3.ziphtml

將其文件解壓以後，放置你對應js文件夾中便可；java

2：直接引用js文件：git

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

2、學習D3.js

DOM上的數據綁定

先看個簡單的例子：github

<!DOCTYPE html>
 <html>
     <head>
         <script type="text/javascript" src="d3.v3.min.js"></script>
     </head>
     <body>
        <script>
         var data = [1,2,3];
         var p = d3.select("body").selectAll("p")
                .data(data)
                .enter()
                .append("p")
                .text("hello");
       </script>
     </body>
 </html>

很好，如今已經成功使用D3.js把一些數據綁定到了Dom元素上了！數組

d3.select ——從當前文檔中選擇一個元素。瀏覽器

d3.selectAll ——從當前文檔選擇多個元素。網絡

D3.js中的selectAll方法使用的是CSS3中的選擇器來獲取DOM元素，不一樣於select方法。可是上述的html網頁中並無p標籤，也就是說該方法返回的是一個空的選擇結果。所以咱們使用 .data()和.enter()把數據綁定到了這個空的選擇結果中去。app

D3.js中的.data是把一個數據數組與當前的選擇結果聯繫起來。在上面的例子中，並無提供key值，所以數組中的每一個元素都被分配到當前選擇結果中的一個元素上。數組中第一個元素，也就是數字1，被分配到第一個p元素，以此類推。框架

可是，正如上面所說的，初始網頁中根本就沒有p標籤，那如何如添加呢？這就須要提到D3.js的Virtual Selections。與D3.js其餘方法不一樣，.data操做符返回的是三個Virtual selection。這3個Virtual selection 是enter、update以及exit。

enter選集：對全部缺失的元素以佔位符placeholder替代；

update選集：包含現有的元素，並綁定到數據；

剩下的元素最終都會出如今exit選集中，並被移除。

因爲下面代碼獲得的選集是空的：

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

所以，虛擬enter選集中包含的是p元素的佔位符。

然而D3.js的enter方法是從data操做符返回一個虛擬選集，這個方法只能做用於data操做符，由於data操做符返回的是三個虛擬選集。

var p = d3.select("body").selectAll("p")
   .data(theData)
   .enter()

正如前面所述，對於數組中的數據元素，若是缺乏與之對應的DOM元素，那麼就會有一個佔位符來頂替，而enter方法返回的就是這些佔位符集合的引用。

獲得這個引用以後，就能對這個集合操做了。須要注意的是，這個引用後只能鏈接append，insert以及select操做符，經過它們來操做引用所指向的集合。在這些操做連接到 .enter()選集，咱們就能夠像處理其餘選集那樣，來對其內容進行更改。

D3.js的Append操做符

var p = d3.select("body").selectAll("p")
       .data(theData)
       .enter()
       .append("p")

將.append()做用於.enter()選集之上。對於上一步中所產生的每一個佔位符，都有一個p元素插入進去。由於在數據中，有3個數據元素，可是在網頁中，沒有p元素，因此.append()就建立並加入了3個段落元素。當咱們對.enter()的選集使用了append操做後，返回的是一個具備3個html段落元素的選集。

D3.js的text操做符

text操做符是對全部被選擇的元素的textContent屬性進行賦值。所以每一個元素都加入了「hello」。

這就是最簡單的操做，經過D3.js進行對DOM元素的操做。