前一篇D3學習手記-01-初探，概括了D3的特點，設置了25號代碼盒子，作為D3學習、測試的模板。
這篇手記，重點研讀D3的核心概念，數據綁定 Data Binding。
本篇代碼的代碼盒子編號為36號。在電腦上訪問https://daima.co/36
什麼是數據
數據是個十分寬泛的概念，在D3的語境裡，數據有這個幾層含義：
- 具有一定的結構
- 有數據源和獲取的方法
- 具有一定含義，可以被解讀
數據源可以是文件、數據庫、或者數據查詢API。
當然，為了方便學習、測試，也可以直接在代碼中定義數據，例如：
<code>const
dataset
=
[{
name:
'張三'
,
age:
24
},{
name:
'李四'
,
age:
21
}]
/<code>
什麼是數據綁定
數據綁定，可以說是D3最獨特、也是最重要的一個概念，需要反覆咀嚼、多次練習才能理解、掌握。
數據可視化說白了，就是將數據映射到視覺效果。數據進來、視覺效果出去。比如24歲，可能以長度為240個像素、寬為8個像素、顏色為藍色的條形圖表示。如何映射，由開發者、或者可視化的設計者決定。
D3通過將數據綁定到DOM元素。綁定將數據與一個或多個DOM元素相關聯，可以通過這種關聯雙向操作DOM和數據。
D3的DOM選擇器
數據綁定，要有數據，也要有DOM元素。D3也有一套自己的DOM選擇器API。跟jQuery類似，也是通過CSS選擇器來選擇DOM元素。
JavaScript代碼
<code>d3
.select
('.app-user-list'
).selectAll
('.app-user'
).style
('color'
,'blue'
);/<code>
HTML
<code><
div
id
='wrapper'
><
ul
class
='app-user-list'
><
li
class
='app-user'
> 張三i
><
li
class
='app-user'
> 李四i
>ul
>div
>/<code>
輸出效果：
D3的數據選擇
數據選擇是D3 API的核心。數據選擇實際上是一組DOM選擇與一組數據選擇的差（Diff）。下面的例子選擇一組DOM元素，和數據進行綁定和匹配。
<code>const
users = [{id
:1
, name:'張三'
, role:'student'
}, {id
:2
, name:'李四'
, role:'student'
}, {id
:3
, name:'王五'
, role:'teacher'
}]const
selection = d3.select('ul.app-user-list'
) .selectAll('li.app-user'
) .data(users) console.log(selection.size())/<code>
您可以自己創建一個頁面實驗下。
DOM選擇器最終通過.data實現數據選擇與綁定，最後的結果可以理解為DOM狀態與數據狀態的選擇的一個比較差(diff)，有三種結果：
- 更新選擇：現有的DOM選擇與數據選擇匹配的部分
- 輸入選擇：數據選擇存在但已有的DOM選擇中不存在的虛擬、或稱佔位DOM元素
- 移除選擇：現有的DOM選擇與數據不匹配的部分
更新選擇
顧名思義，更新選擇更新已有匹配元素。
看一段代碼：
<code> selection.text(d
=> d.name) .style('color'
,d
=> (d.role ==='student'
?'blue'
:'red'
));/<code>
完整代碼：
<code>const
users = [{ id:1
, name:'張三'
, role:'student'
}, { id:2
, name:'李四'
, role:'student'
}, { id:3
, name:'王五'
, role:'teacher'
}]const
selection = d3.select('ul.app-user-list'
) .selectAll('li.app-user'
) .data(users)console
.log(selection.size()) selection.text(d
=> d.name) .style('color'
,d
=> (d.role ==='student'
?'blue'
:'red'
));/<code>
見36號盒子的‵更新選擇.html`頁面。
輸出結果：
輸入選擇
輸入選擇指的是輸入新的內容的選擇(selection)。既然還沒有內容，所以輸入選擇選擇的是虛擬或稱為佔位選擇的DOM元素，需要通過DOM操作，填充實際的內容。
看一段代碼：
<code>const
users = [{ id:1
, name:'張三'
, role:'student'
}, { id:2
, name:'李四'
, role:'student'
}, { id:3
, name:'王五'
, role:'teacher'
}]const
enterUsers = d3.select('ul.app-user-list'
) .selectAll('li.app-user'
) .data(users) .enter();console
.log(enterUsers.size()); enterUsers.append('li'
) .attr('class'
,'app-user'
) .text(d
=> d.name) .style('color'
,d
=> (d.role ==='teacher'
?'red'
:'blue'
))/<code>
輸出效果：
問題：為什麼輸出的第一、二項還是李梅、韓雷雷，沒有變成數據裡的張三、李四呢？
移除選擇
顧名思義，移除選擇是將DOM選擇中和數據選擇不匹配的部分移除。
看一段代碼：
<code>const
users = [{ id:1
, name:'張三'
, role:'student'
}, { id:2
, name:'李四'
, role:'student'
}]const
exitUsers = d3.select
('ul.app-user-list'
) .selectAll('li.app-user'
) .data(users) .exit() exitUsers.remove
();/<code>
輸出效果：
最後
- 數據綁定是D3最重要的概念
- 數據綁定是D3最重要的概念
- 數據綁定是D3最重要的概念
重要的事情說三遍。
那麼數據選擇與DOM選擇是如何匹配的呢？示例裡的匹配很簡單：按數據數組與DOM數組元素的位置。
D3當然提供其他的匹配方法，後面我開始研習時，再和大家分享。
本篇代碼盒子編號為36號。在電腦上訪問https://daima.co/36
原創不易，喜歡的點個贊、關注一下唄!~
