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
}