General Update Pattern

导航

这篇文章由四部分组成.

• 第一部分简单说明Enter/Update/Exit的关系,Enter进来的字母,显示为绿色; Update的字母,显示为深灰色,而剩余的字母直接删除.由于没有key Function的存在,故无法将data和element关联起来.故更新的数据总在最后.
• 第二部分简单说明key Function的作用.由于存在key Function,所以字母会在它原始存在的位置上进行更新.
• 第三部分引入duration, 更加形象化的展示数据的Enter/Update/Exit.
• 第四部分为自己编写的一个小页面. 点击键盘上的字符a_z,则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);
  }

源码位置

• 第一部分到第三部分
  https://github.com/leicj/d3/blob/master/src/components/codeinout.js
• 第四部分
  https://github.com/leicj/d3/blob/master/src/components/keyjump.js
• 所在项目的源码:
  https://github.com/leicj/d3