原文：How Selections Work

selection是Array子類

selection是Array子類，并不是由DOM元素組成的數(shù)組，它繼承了原生數(shù)組的方法（如 array.forEach、array.map）外，還提供了操作選中元素的方法，如設(shè)置選中元素的屬性（selection.attr）和樣式（selection.style）。通常我們不會(huì)使用Array的原生方法，因?yàn)镈3提供了更加方便的方法（比如selection.each），D3還重寫(xiě)了一些原生方法來(lái)適應(yīng)selection的行為（如selection.filter、selection.sort）。
d3.selectAll("h2");

image.png

image.png

group

注意：selection并不是元素的數(shù)組，而是由group組成的數(shù)組，其中每個(gè)group才是由元素組成的數(shù)組。d3.select返回的selection包含了一個(gè)group，這個(gè)group包含了選中的body元素。同樣，d3.selectAll返回的selection包含了一個(gè)group，這個(gè)group包含了選中的多個(gè)元素。

d3.select 和 d3.selectAll 返回的selection都只有一個(gè)group。唯一獲得包含多個(gè) group的selection 的方法是 selection.selectAll。

每一個(gè)group都有一個(gè)parentNode屬性用來(lái)存儲(chǔ)當(dāng)前group內(nèi)全部元素共同的父元素。當(dāng)group被創(chuàng)建時(shí)就具有該屬性。比如d3.selectAll('tr').selectAll('td')，返回的selection包含了多個(gè)group，每個(gè)group包含多個(gè)td元素，且每個(gè)group的parentNode是tr元素。d3.select 和 d3.selectAll返回的group的父元素是document。

大多時(shí)候我們不需要去關(guān)注selection的group，當(dāng)我們調(diào)用selection.attr或者selection.style時(shí)，selection中的所有g(shù)roup的所有子元素都會(huì)調(diào)用這個(gè)函數(shù)。group帶來(lái)的一個(gè)需要注意的地方：當(dāng)調(diào)用selection.style('color', function(data, index){...})，第二個(gè)函數(shù)參數(shù)里面的index表示的是元素在group中的索引，而不是在selection中的索引。

什么操作不會(huì)改變group

ps: 個(gè)人對(duì)group沒(méi)有被修改的理解是：selection中g(shù)roup的個(gè)數(shù)沒(méi)有發(fā)生改變且每個(gè)group的parentNode屬性和元素個(gè)數(shù)也沒(méi)有改變。

只有selectAll操作會(huì)涉及到修改group的結(jié)構(gòu)（包括group的個(gè)數(shù)和group的parentNode屬性），select操作會(huì)保留之前的group結(jié)構(gòu)(每個(gè)group的parentNode沒(méi)有改變)，老的selection中每個(gè)元素都只會(huì)在新的selection中對(duì)應(yīng)一個(gè)新的元素。select操作會(huì)直接把數(shù)據(jù)從父元素傳遞給子元素 (因此也不需要data-join的過(guò)程)。

selection.append和selection.insert方法也會(huì)保持當(dāng)前的group結(jié)構(gòu)并傳遞數(shù)據(jù)。

數(shù)據(jù)綁定

注意：data并不是selection的屬性，而是selection中元素的屬性。當(dāng)把數(shù)據(jù)綁定至selection時(shí)，data將被存儲(chǔ)在DOM元素的data屬性上。數(shù)據(jù)是持久的，而選擇可以被認(rèn)為是瞬時(shí)狀態(tài)：你可以從DOM重新選擇元素，它們將保留先前綁定到它們的任何數(shù)據(jù)。

數(shù)據(jù)綁定至元素的幾種方式：

• selection.data()
• selection.datum()
• 通過(guò)調(diào)用append、insert、select方法從父元素繼承獲得。

和selection的其它方法不同，selection.data是為每一個(gè)group定義數(shù)據(jù)而不是為每個(gè)元素定義數(shù)據(jù)，每一個(gè)group對(duì)應(yīng)的data應(yīng)該是一個(gè)數(shù)組或者返回?cái)?shù)組的函數(shù)。
selection.data(function(parentNode, groupIndex){...})里面parentNode對(duì)應(yīng)group的父元素，groupIndex對(duì)應(yīng)group的索引。

當(dāng)selection只包含一個(gè)group時(shí)，我們可以直接傳遞group對(duì)應(yīng)的數(shù)據(jù)數(shù)組給selection.data([1, 2, 3...])。那么什么時(shí)候需要使用函數(shù)作為入?yún)⒛兀?dāng)我們的selection里面包含了多個(gè)group時(shí)，則需要使用函數(shù)入?yún)椴煌琯roup分配對(duì)應(yīng)的數(shù)據(jù)數(shù)組,selection.data(function(parentNode, groupIndex){ return data[groupIndex]})，其中data=[[1, 2, 3],[4,5,6],...]。

data-join

將數(shù)據(jù)綁定到元素，我們需要知道哪個(gè)數(shù)據(jù)該綁定至哪個(gè)元素，這一過(guò)程是通過(guò)匹配key來(lái)完成的。key可以是一個(gè)簡(jiǎn)單的字符串(比如‘name’), 當(dāng)數(shù)據(jù)和元素的鍵相等時(shí)，認(rèn)為數(shù)據(jù)和元素是綁定。

指定key值最簡(jiǎn)單的方法就是直接使用索引：第一個(gè)數(shù)據(jù)綁定至第一個(gè)元素，第二個(gè)數(shù)據(jù)綁定至第二個(gè)元素，以此類推....

image.png

數(shù)據(jù)綁定后的selection:

image.png

除了使用索引作為key值，也可以自定義指定key函數(shù)作為selection.data(data, function(){...})的第二個(gè)參數(shù)，key函數(shù)為當(dāng)前的數(shù)據(jù)或元素返回一個(gè)key值。

Enter, Update and Exit

進(jìn)行數(shù)據(jù)綁定時(shí)，有三種可能的結(jié)果出現(xiàn)：

• Update： 對(duì)于某一個(gè)數(shù)據(jù), 有相同 key 值的 DOM 元素與其對(duì)應(yīng)
• Enter：對(duì)于某一個(gè)數(shù)據(jù), 沒(méi)有相同 key 值的 DOM 元素與其對(duì)應(yīng)
• Exit：對(duì)于某一個(gè) DOM 元素, 沒(méi)有相同 key 值的數(shù)據(jù)與其對(duì)應(yīng)

分別對(duì)應(yīng)selection.data，selection.enter和selection.exit返回的三種狀態(tài)的selection。

合并Enter & Update

對(duì)于Enter 和 Update 選擇集，我們通常都需要進(jìn)行更新樣式、位置等操作，因此為了減少重復(fù)代碼，可以先對(duì)這2個(gè)選擇集使用selection.merge進(jìn)行合并操作，再進(jìn)行更新。

參考

D3.js 之d3-selection