Joins
在D3中纪吮， 我們是動(dòng)態(tài)創(chuàng)建dom元素钥顽。一般可以使用append來創(chuàng)建單一元素：
const svg = d3.select("svg");
svg.append("circle").attrs({ cx: 5, cy: 5, r: 2.5 });
而如果要根據(jù)數(shù)組進(jìn)行批量創(chuàng)建dom块仆， 則需要以下寫法：
const svg = d3.select("svg");
svg.selectAll('circle').data([20, 30, 40])
.enter().append('circle')
.attrs({ cx: d => d, cy: d => d, r: 5 });
而這里所有的疑惑脐彩， 都可使用下圖進(jìn)行解答：
image.png
- 首先， 我們使用svg.selectAll('circle')產(chǎn)生一組空的選擇器犁河。
- 選擇器選擇和數(shù)據(jù)進(jìn)行綁定鳖枕，這時(shí)候會(huì)產(chǎn)生三個(gè)操作：enter，update和exit桨螺。依據(jù)數(shù)據(jù)數(shù)據(jù)宾符，enter依次對(duì)應(yīng)數(shù)組中的每個(gè)元素，使用append產(chǎn)生update效果灭翔，在循環(huán)結(jié)束后魏烫，使用exit退出。
Key Function
一般情況下肝箱，我們使用data時(shí)候哄褒，要保證數(shù)組數(shù)據(jù)的順序。如果是數(shù)組煌张，則默認(rèn)索引呐赡。如果數(shù)組的元素為一個(gè)字典，則需要提供一個(gè)key（因?yàn)樽值涫菬o序的）骏融。
考慮以下的代碼：
const otherData = [{value: 65}, {value: 35}, {value: 95}];
const svg = d3.select("svg");
svg.selectAll('circle').data(otherData)
.enter().append('circle')
.attrs({ cx: d => d.value, cy: d => d.value + 100, r: 5 });
這樣會(huì)在界面上生成三個(gè)circle（圖1）罚舱。雖然字典是無序的，但是不需要和已繪制的circle進(jìn)行匹配绎谦，所以不需要key function.
1.png
在上述代碼前面增加以下代碼：
svg.selectAll('circle').data(data)
.enter().append('circle')
.attrs({ cx: d => d, cy: d => d, r: 5 });
這樣會(huì)生成新的三個(gè)circle，圖1的circle消失了粥脚。這是因?yàn)榇嬖?strong>圖1的代碼情況下窃肠，圖2的代碼需要key function明確保證數(shù)組的順序，否則無法繪圖刷允。
當(dāng)我們加入：
.data(otherData, d => d.value)
后冤留，圖1和圖2均顯示出來碧囊。
1.png
Enter, Update and Exit
Update: 提供數(shù)據(jù)，存在匹配的元素
Enter: 提供數(shù)據(jù)纤怒，不存在匹配的元素糯而。
Exit: 提供元素，沒有匹配的數(shù)據(jù)泊窘。
const data = [35, 65, 95];
const divs = d3.select('.chart').selectAll('p').data(data);
divs.enter().append('p').text(d => d);
const d1 = d3.select('.chart').selectAll('p').data([35, 65]);
d1.exit().remove();
- 第一個(gè)divs，提供了update/enter的說明。
- 而d1中丁鹉，由于只提供了前兩個(gè)數(shù)據(jù)胆敞，經(jīng)過exit.remove后，會(huì)刪除第三條數(shù)據(jù)携悯。
- 假設(shè)我們編寫如下的代碼(d1將做無用功)祭芦，將不匹配的數(shù)據(jù)重新加入到頁面中，則頁面依舊保留三條數(shù)據(jù)：
d1.exit().enter().append('p').text(d => d);
