General Update Pattern
2018-04-21 本文已影响0人
雷朝建
导航
这篇文章由四部分组成.
- 第一部分简单说明Enter/Update/Exit的关系,Enter进来的字母,显示为绿色; Update的字母,显示为深灰色,而剩余的字母直接删除.由于没有key Function的存在,故无法将data和element关联起来.故更新的数据总在最后.
- 第二部分简单说明key Function的作用.由于存在key Function,所以字母会在它原始存在的位置上进行更新.
- 第三部分引入duration, 更加形象化的展示数据的Enter/Update/Exit.
- 第四部分为自己编写的一个小页面. 点击键盘上的字符az,则02秒内字符上升消失.2~4秒内字符下降出现.
第一部分
主要代码如下:
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();
}
- 预先将所有的text设置为"class=update".
- 将enter进来的字符设置为"class=enter".
- 使用merge操作将enter和update结合起来.
- 使用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进行比较.
- merge后,需要手动设置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);
}
- 引入转换延时机制: duration
- 在字符exit.remove操作情况下,通过duration,将字符的y位置从0下降到60,并且透明度缓慢设置为1e-6.
- 在字符更新情况下,将透明度设置为1, 并且进行x位置的重新调整.
- 在字符新增情况下, 将字符的y位置从-60下降到0, 并且透明度从0缓慢设置为1.
第四部分
设置文本位置代码:
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-${d}`)
监听键盘事件代码:
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);
}
