SOURCE

console 命令行工具 X clear

                    
>
console
var svg = d3.select('svg')
  .attr('width', 20 * 26)
  .attr('height', 120);

function update(alpha) {
  var duration = 500;
  svg.selectAll('text')
    .data(alpha)
    .exit()
    .transition()
    .duration(duration)
    .attr('y', 100)
    .style('opacity', 0)
    .remove()

  svg.selectAll('text')
    .data(alpha)
    .text(d => d)
    .transition()
    .duration(duration)
    .style('fill', 'blue')
    .attr('x', (d, i) => i * 20)
    .attr('y', 60)

  svg.selectAll('text')
    .data(alpha)
    .enter()
    .append('text')
    .attr('alpha', d => d)
    .text(d => d)
    .attr('x', (d, i) => i * 20)
    .attr('y', 20)
    .style('fill', 'red')
    .style('opacity', 0)
    .transition()
    .duration(duration)
    .attr('y', 60)
    .style('opacity', 1)
}

var alphabet = d3.range(26)
  .map(d => String.fromCharCode(d + 65));

function rand() {
  var i = 26;
  //打乱字母顺序
  while (--i) {
    var t = Math.floor(d3.randomUniform(0, i)());
    var nt = alphabet[t];
    alphabet[t] = alphabet[i];
    alphabet[i] = nt;
  }
  var randalpha = alphabet.slice(Math.floor(Math.random() * 26))
    .sort();
  update(randalpha);
}

d3.interval(rand, 1000, d3.now() - 1000)

function test() {
  test(1, function() {
    return 1;
  })
}
<svg>
</svg>
body {
  background: white;
}

text {
  font-family: consolas, monaco, "Ubuntu Mono", monospace;
  font-size: 20px;
  width: 20px;
  font-weight: bold;
}

svg {
  display: block
}

本项目引用的自定义外部资源