前一篇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
原創不易,喜歡的點個贊、關注一下唄!~