selection是Array子類
selection是Array子類闷沥，并不是由DOM元素組成的數(shù)組漱凝，它繼承了原生數(shù)組的方法（如 array.forEach分瘾、array.map）外，還提供了操作選中元素的方法，如設(shè)置選中元素的屬性（selection.attr）和樣式（selection.style）妈经。通常我們不會(huì)使用Array的原生方法，因?yàn)镈3提供了更加方便的方法（比如selection.each）捧书，D3還重寫了一些原生方法來適應(yīng)selection的行為（如selection.filter吹泡、selection.sort）。
d3.selectAll("h2");
d3.selectAll("tr").selectAll("td");
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屬性用來存儲(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帶來的一個(gè)需要注意的地方：當(dāng)調(diào)用selection.style('color', function(data, index){...})，第二個(gè)函數(shù)參數(shù)里面的index表示的是元素在group中的索引截汪，而不是在selection中的索引疾牲。
什么操作不會(huì)改變group
ps: 個(gè)人對group沒有被修改的理解是：selection中g(shù)roup的個(gè)數(shù)沒有發(fā)生改變且每個(gè)group的parentNode屬性和元素個(gè)數(shù)也沒有改變。
只有selectAll操作會(huì)涉及到修改group的結(jié)構(gòu)（包括group的個(gè)數(shù)和group的parentNode屬性）挫鸽，select操作會(huì)保留之前的group結(jié)構(gòu)(每個(gè)group的parentNode沒有改變)说敏，老的selection中每個(gè)元素都只會(huì)在新的selection中對應(yīng)一個(gè)新的元素。select操作會(huì)直接把數(shù)據(jù)從父元素傳遞給子元素 (因此也不需要data-join的過程)丢郊。
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()
- 通過調(diào)用append、insert沾谓、select方法從父元素繼承獲得委造。
和selection的其它方法不同，selection.data是為每一個(gè)group定義數(shù)據(jù)而不是為每個(gè)元素定義數(shù)據(jù)均驶，每一個(gè)group對應(yīng)的data應(yīng)該是一個(gè)數(shù)組或者返回?cái)?shù)組的函數(shù)昏兆。
selection.data(function(parentNode, groupIndex){...})里面parentNode對應(yīng)group的父元素，groupIndex對應(yīng)group的索引妇穴。
當(dāng)selection只包含一個(gè)group時(shí)爬虱，我們可以直接傳遞group對應(yīng)的數(shù)據(jù)數(shù)組給selection.data([1, 2, 3...])。那么什么時(shí)候需要使用函數(shù)作為入?yún)⒛靥谒?dāng)我們的selection里面包含了多個(gè)group時(shí)跑筝，則需要使用函數(shù)入?yún)椴煌琯roup分配對應(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è)元素，這一過程是通過匹配key來完成的逛腿。key可以是一個(gè)簡單的字符串(比如‘name’), 當(dāng)數(shù)據(jù)和元素的鍵相等時(shí)稀并，認(rèn)為數(shù)據(jù)和元素是綁定。
指定key值最簡單的方法就是直接使用索引：第一個(gè)數(shù)據(jù)綁定至第一個(gè)元素单默，第二個(gè)數(shù)據(jù)綁定至第二個(gè)元素，以此類推....
var numbers = [4, 5, 18, 23, 42];d3.selectAll("div").data(numbers);
數(shù)據(jù)綁定后的selection:
除了使用索引作為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： 對于某一個(gè)數(shù)據(jù), 有相同 key 值的 DOM 元素與其對應(yīng)
- Enter：對于某一個(gè)數(shù)據(jù), 沒有相同 key 值的 DOM 元素與其對應(yīng)
- Exit：對于某一個(gè) DOM 元素, 沒有相同 key 值的數(shù)據(jù)與其對應(yīng)
分別對應(yīng)selection.data境蜕，selection.enter和selection.exit返回的三種狀態(tài)的selection。
合并Enter & Update
對于Enter 和 Update 選擇集凌停，我們通常都需要進(jìn)行更新樣式粱年、位置等操作，因此為了減少重復(fù)代碼罚拟，可以先對這2個(gè)選擇集使用selection.merge進(jìn)行合并操作台诗，再進(jìn)行更新完箩。
