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