d3.js 之關聯數據：data操做符

數據可視化

在可視化工做中，一個基本出發點是將不一樣的數值映射到不一樣的可視化 元素的屬性上，使其表現出各自不一樣的視覺特徵。

好比：以數組中的每個值爲直徑分別建立一個圓，咱們獲得三個圓：

在d3中，可視化元素能夠是HTML元素或者SVG元素。好比，咱們可使用一個圓角的 DIV元素表示圓。這樣一個數字就對應了一個DIV元素。

data：數據操做符

在d3的處理流水線中，data()操做符使用數據來修剪選擇集中的DOM元素：

選擇集的data()操做符執行後返回的是一個新的選擇集，其內容是與數據集 匹配的DOM對象。在圖中，data()使用數據集：[10,34]與選擇集中的DOM對象 按順序號依次匹配，並將數字存入對應DOM對象的data屬性。顯然，第3個div 元素沒有對應序號的數據，因此返回的選擇集中不包括這個DOM對象。

從集合運算的角度，這就像進行兩個集合的交集（A∩B）計算，返回兩個集合共有的那 部分紅員。

enter：得到未匹配數據

若是數據集中的數據比選擇集中的DOM元素多，data()會將這部分數據單獨保存， 並經過enter()方法提供出來：

注意enter()返回的也是一個選擇集對象，只是這個選擇集 不包含任何DOM元素，可將其視爲僅包含數據值的僞選擇集。

這能夠類比於兩個集合的差額部分，A-B表明了沒有對應 可視化元素的那部分數據：

去掉示例（http://www.hubwiz.com/course/54fd40cfe564e50d50dcf284/ 中關聯數據第三頁）代碼中的enter()行，看看結果有什麼變化？體會這裏面的含義！

exit：得到未匹配的DOM元素

一樣的，若是數據集中的數據比選擇集中的DOM元素少，data()會將這部分多出來的DOM元素 單獨保存，並經過exit()方法提供出來：

這一樣可類比於兩個集合的差額部分，B-A表明了沒有對應數據的那部分 可視化元素：

去掉示例（http://www.hubwiz.com/course/54fd40cfe564e50d50dcf284/ 中關聯數據第四頁）代碼中的exit()行，看看結果有什麼變化？體會這裏面的含義！

數據集：使用簡單數組

在d3中，數據集是使用數組/array來指定的。

最簡單的數組是一組數值，好比：[12.34,27.29,29.39,12.38]。這些數值 能夠直接映射成可視化元素的一個屬性值（或許須要一些必要的比例縮放， 以便能看得清楚）。

常常用來映射數值的可視化元素的屬性包括：

• 座標位置：對於HTML元素來說，就是left、top屬性
• 寬度：對於HTML元素來說，就是width屬性
• 高度：對於HTML元素來說，就是height屬性。
• 背景顏色：好比，數值越小，顏色越淺。
• 字體顏色
• 字體大寫
• ....

這依賴於你的想象力。

數據集：使用對象數組

在實際的應用場景中，數據集中的每一項一般對應着一個業務模型對象，不會只是 一個簡單的數值，而是一個有衆多屬性的JSON對象：

1. var repo = [
2. {
3. name : "Zhang San",
4. gender : "Male",
5. age : 28,
6. friends : [...]
7. },
8. ...
9. ]

但這對於d3不是什麼難事，一早提到的訪問器函數的做用就體如今這個地方： d3雖然管理DOM元素和數據對象的映射關係，但它並不直接訪問數據， 而是經過咱們提供的訪問器接口才訪問數據！

這樣的好處是，d3不須要對數據結構進行嚴格地限制了，每當它 須要訪問數據，老是把DOM元素對應的數據傳遞給咱們提供的訪問器 函數，由咱們負責解析，它只要結果。

數據集：使用數據函數

data()操做符會對傳入的參數類型進行判斷，若是是一個函數，它就會 執行這個函數，而且使用其返回值（注意：這個函數的返回值必須是一個數組） 做爲數據集。

在有些應用場景下，這個功能很實用。好比，你瞭解數據的生成模式，只須要 一個公式就能產生出大量的數據；或者，你就是像我同樣，爲了展現一下這個 功能...

（http://www.hubwiz.com/course/54fd40cfe564e50d50dcf284/ 中關聯數據第七頁）的代碼生成了一些隨機數據，具備以下的結構：

1. {
2. x: <隨機數>
3. y: <隨機數>
4. value: <隨機數>
5. }

咱們在示例中很直白地將數據的x值映射爲DIV元素的left屬性，y值映射爲DIV元素 的top屬性，並在每一個DIV中顯示value。

每次要將一組數據進行可視化，總有這樣一個設計過程。d3簡化了從數據變換到圖形 的工做，可是，思想，仍是來源於咱們本身。

請參考代碼思考前一段話，並試着改變一下數據屬性的映射方案。

參考資料：http://www.hubwiz.com/