導(dǎo)航
這篇文章由四部分組成.
- 第一部分簡(jiǎn)單說(shuō)明Enter/Update/Exit的關(guān)系,Enter進(jìn)來(lái)的字母,顯示為綠色; Update的字母,顯示為深灰色,而剩余的字母直接刪除.由于沒(méi)有key Function的存在,故無(wú)法將data和element關(guān)聯(lián)起來(lái).故更新的數(shù)據(jù)總在最后.
- 第二部分簡(jiǎn)單說(shuō)明key Function的作用.由于存在key Function,所以字母會(huì)在它原始存在的位置上進(jìn)行更新.
- 第三部分引入duration, 更加形象化的展示數(shù)據(jù)的Enter/Update/Exit.
- 第四部分為自己編寫(xiě)的一個(gè)小頁(yè)面. 點(diǎn)擊鍵盤(pán)上的字符az,則02秒內(nèi)字符上升消失.2~4秒內(nèi)字符下降出現(xiàn).
第一部分
主要代碼如下:
const update = (data) => {
const text = g.selectAll('text').data(data);
text.attr('class', 'update');
text.enter().append('text')
.attr('class', 'enter')
.attr('x', (d, i) => i * 32)
.attr('dy', '.35em')
.merge(text)
.text(d => d);
text.exit().remove();
}
- 預(yù)先將所有的text設(shè)置為"class=update".
- 將enter進(jìn)來(lái)的字符設(shè)置為"class=enter".
- 使用merge操作將enter和update結(jié)合起來(lái).
- 使用exit.remove刪除不在data中的元素.
第二部分
主要代碼如下:
const update = (data) => {
const text = g.selectAll('text').data(data, d => d);
text.attr('class', 'update');
text.enter().append('text')
.attr('class', 'enter')
.attr('dy', '.35em')
.merge(text)
.attr('x', (d, i) => i * 32)
.text(d => d);
text.exit().remove();
}
相比于第一部分,這里做了兩處修改:
- 使用key Function,則可將data和element進(jìn)行比較.
- merge后,需要手動(dòng)設(shè)置x的位置,保證字符在正確的位置顯示.
第三部分
主要代碼如下:
const update = (data) => {
const text = g.selectAll('text').data(data, d => d);
const t = d3.transition().duration(750);
text.exit()
.attr('class', 'exit')
.transition(t)
.attr('y', 60)
.style('fill-opacity', 1e-6)
.remove();
text.attr('class', 'update')
.attr('y', 0)
.style('fill-opacity', 1)
.transition(t)
.attr('x', (d, i) => i * 32);
text.enter().append('text')
.attr('class', 'enter')
.attr('y', -60)
.attr('x', (d, i) => i * 32)
.style('fill-opacity', 1e-6)
.text(d => d)
.transition(t)
.attr('y', 0)
.style('fill-opacity', 1);
}
- 引入轉(zhuǎn)換延時(shí)機(jī)制: duration
- 在字符exit.remove操作情況下,通過(guò)duration,將字符的y位置從0下降到60,并且透明度緩慢設(shè)置為1e-6.
- 在字符更新情況下,將透明度設(shè)置為1, 并且進(jìn)行x位置的重新調(diào)整.
- 在字符新增情況下, 將字符的y位置從-60下降到0, 并且透明度從0緩慢設(shè)置為1.
第四部分
設(shè)置文本位置代碼:
text.enter().append('text')
.attr('fill', 'green').attr('dy', '.35em')
.style('font', 'bold 48px monospace')
.attr('y', 0)
.attr('x', (d, i) => i * 32)
.text(d => d)
.attr('class', d => `key-$u0z1t8os`)
監(jiān)聽(tīng)鍵盤(pán)事件代碼:
keyDown = (e) => {
const alphabet = this.state.alphabet;
const key = alphabet[e.keyCode - 65];
const t = d3.transition().duration(2000);
d3.select(`.key-${key}`)
.transition(t)
.attr('y', -250)
.style('fill-opacity', 1e-6)
.transition(t)
.attr('y', 0)
.style('fill-opacity', 1);
}
