重要性
Update抚岗、Enter、Exit是D3.js中十分重要且關(guān)鍵的3個(gè)概念哪怔。它們?nèi)饕幚淼氖?code>數(shù)據(jù)集個(gè)數(shù)和選擇集個(gè)數(shù)之間的匹配問(wèn)題宣蔚。
image.png
圖解三者關(guān)系
image
上圖的解釋：
綠色：如果給定的數(shù)據(jù)
data和節(jié)點(diǎn)Nodes中的數(shù)據(jù)相等，則進(jìn)行update操作藍(lán)色：如果數(shù)組中個(gè)數(shù)多余節(jié)點(diǎn)中的元素個(gè)數(shù)认境，進(jìn)行
update和enter操作橙色：如果給定的數(shù)據(jù)中個(gè)數(shù)不足胚委，則
update和exit操作
image
代碼解釋
update
給定的數(shù)組中的個(gè)數(shù)和
DOM中的個(gè)數(shù)相等，則進(jìn)行update操作叉信，變成了紅色亩冬，更新數(shù)據(jù)。沒(méi)有進(jìn)行enter()方法中變成綠色的操作
image
image
update和enter
給定的元素個(gè)數(shù)是
2硼身，多余DOM的元素個(gè)數(shù)同時(shí)執(zhí)行
update+enter兩個(gè)操作
紅色：
update綠色：
enter
image
update硅急、exit
給定的數(shù)組中元素個(gè)數(shù)小于
DOM中的個(gè)數(shù)（2個(gè)）同時(shí)實(shí)行
update+exit操作
紅色：
update藍(lán)色：
exit
image
