用D3.js 十分钟实现字符跳动效果

用D3.js 十分钟实现字符跳动效果

注

本文基于 D3.js 作者 Mike Bostock 的 例子

原文分为三部分, 在这里笔者将其整合为了一篇方便阅读.

该效果基于 D3.js, 主要使用到了 d3-selection. 如果对d3-selection的基本使用逻辑不太清楚可以参见 这篇文章.

效果图

• Step1 首先代码会随机生成一个字符串, 该字符以绿色进入画面.

• Step2 接下来, 代码随机生成一个新字符串, 新生成的字符串会和原始字符串进行对比:

  2.1 新字符串和原始字符串中相同的字母,会变成黑色保留在屏幕上

  2.2 原始字符串中有, 而新字符串中没有的字母, 会变成红色,被移除屏幕

  2.3 新字符串中有, 而原始字符串中没有的字母, 会变成绿色,被添加到屏幕

代码实现

1. 字符切换

第一步要完成的效果是:

• 完成基本字符切换
• 进入时为绿色, 不变时为黑色
• 被移除的字符直接被从界面中移除

先上代码, 点我运行

<script>
var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g").attr("transform", "translate(32," + (height / 2) + ")");

function update(data) {
    

  // DATA JOIN
  // Join new data with old elements, if any.
  var text = g.selectAll("text")
    .data(data);

  // UPDATE
  // Update old elements as needed.
  text.attr("class", "update");

  // ENTER
  // Create new elements as needed.
  //
  // ENTER + UPDATE
  // After merging the entered elements with the update selection,
  // apply operations to both.
  text.enter().append("text")
      .attr("class", "enter")
      .attr("x", function(d, i) {
     return i * 32; })
      .attr("dy", ".35em")
    .merge(text)
      .text(function(d) {
     return d; });

  // EXIT
  // Remove old elements as needed.
  text.exit().remove();
}

// The initial display.
update(alphabet);

// Grab a random sample of letters from the alphabet, in alphabetical order.
d3.interval(function() {
    
  update(d3.shuffle(alphabet)
      .slice(0,