用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, Math.floor(Math.random() * 26)).sort());
}, 1500);</script>
代码不长, 接下来一步步分析代码逻辑:
首先, 获取svg的宽高信息. 并创建一个 元素用来承接接下来要创建的字符( 元素)
var svg = d3.select("svg"),width = +svg.attr("width"),height = +svg.attr("height"),g = svg.append("g").attr("transform", "translate(32," + (height / 2) + ")");
在 update()
方法中, 我们传进来一个字符串 data (data由26个字母中随机选出一些组成). 首先我们选中所有的 text 元素并将其和data 进行绑定:
var text = g.selectAll("text").data(data);
然后我们处理enter集合 (也就是新加入的字符), 为每一个新字符添加一个 text 元素, 并为其添加class属性, 使用index为其计算出横纵坐标:
text.enter().append("text") // 添加svg text元素.attr("class", "enter") // 添加class属性 (绿色).attr("x", function(d, i) { return i * 32; }) // 按每个字符32像素, 为其计算x坐标.attr("dy", ".35em") // 设置y轴偏移量
接下来同时处理 enter 和 update 集合, 将字符数据填入 text 元素中:
.merge(text).text(function(d) { return d; });
最后处理 exit集合, 我们暂时直接将其从屏幕中移除:
text.exit().remove();
我们用 d3.interval(callback, timeInterval)
定时调用update()
来实现字符刷新. 现在我们就得到了下面的效果:
2. 为字符设定key值
如果你观察仔细的话, 你可能已经发现第一步实现的效果中: 新加的字符总是出现在最后. 这显然不是我们想要的效果, 新加的字符出现的位置应该是随机的. 那么出现现在这个效果的原因是什么呢?
答案在于我们在绑定字符数据时: data(data)
并没有指定data的key值, 那么d3会默认使用index作为key, 这样就是为什么新增加的字符总是出现在最后面.
所以我们为字符加入key值的accessor:
var text = g.selectAll("text").data(data, function(d) { return d; });
现在 key 值绑定好后, 已经存在的字符在update时text已经不会再改变, 但是坐标需要重新计算, 所以我们做以下改动:
text.enter().append("text").attr("class", "enter").attr("dy", ".35em").text(function(d) { return d; }) // 将text赋值移动到 enter中.merge(text).attr("x", function(d, i) { return i * 32; }); // 将坐标计算移动到 merge后 (enter & update)
现在我们的代码长这样, 点我在线运行:
<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, function(d) { return d; });// 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("dy", ".35em").text(function(d) { return d; }).merge(text).attr("x", function(d, i) { return i * 32; });// 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, Math.floor(Math.random() * 26)).sort());
}, 1500);</script>
现在我们得到的效果:
3.添加动画
动画能让我们更好的观察元素的变化过程和状态, 给不同状态的元素赋予不同的动画可以更直观的展示我们的数据.
现在我们给字符的变化增加动画效果, 并把字符移除时的颜色变化补上.
首先我们定义一个 transition变量, 并设置其动画间隔为 750
var t = d3.transition().duration(750);
在D3中使用动画非常简单, 在动画前指定元素的一些属性, 调用动画, 再指定动画后的一些属性. D3会自动根据插值器生成动画.
下面的代码对于离开界面的字符(exit selection)进行了处理:
text.exit().attr("class", "exit") // 动画前, 设置class属性, 字体变红.transition(t) // 设置动画.attr("y", 60) // 设置y坐标, 使元素向下离开界面 (y: 0 => 60).style("fill-opacity", 1e-6) // 设置透明度, 使元素渐变消失 (opacity: 1 => 0).remove(); // 最后将其移出界面
同样的, 我们对 enter 和 update selection进行处理:
// UPDATE old elements present in new data.text.attr("class", "update").attr("y", 0).style("fill-opacity", 1).transition(t).attr("x", function(d, i) { return i * 32; });// ENTER new elements present in new data.text.enter().append("text").attr("class", "enter").attr("dy", ".35em").attr("y", -60).attr("x", function(d, i) { return i * 32; }).style("fill-opacity", 1e-6).text(function(d) { return d; }).transition(t).attr("y", 0).style("fill-opacity", 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) {var t = d3.transition().duration(750);// JOIN new data with old elements.var text = g.selectAll("text").data(data, function(d) { return d; });// EXIT old elements not present in new data.text.exit().attr("class", "exit").transition(t).attr("y", 60).style("fill-opacity", 1e-6).remove();// UPDATE old elements present in new data.text.attr("class", "update").attr("y", 0).style("fill-opacity", 1).transition(t).attr("x", function(d, i) { return i * 32; });// ENTER new elements present in new data.text.enter().append("text").attr("class", "enter").attr("dy", ".35em").attr("y", -60).attr("x", function(d, i) { return i * 32; }).style("fill-opacity", 1e-6).text(function(d) { return d; }).transition(t).attr("y", 0).style("fill-opacity", 1);
}// 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, Math.floor(Math.random() * 26)).sort());
}, 1500);</script>
最终效果:
如果觉得不错的话, 不妨点击下面的链接关注一下 : )
github主页
知乎专栏
掘金
用D3.js 十分钟实现字符跳动效果相关推荐
- js添加class_用D3.js 十分钟实现字符跳动效果
用D3.js 十分钟实现字符跳动效果 注 本文基于 D3.js 作者 Mike Bostock 的 例子 原文分为三部分, 在这里笔者将其整合为了一篇方便阅读. 该效果基于 D3.js, 主要使用到了 ...
- 十分钟实现鼠标悬停效果,CSS3悬停效果
视频:https://www.bilibili.com/video/BV1cy4y1D7mz 十分钟实现鼠标悬停效果,CSS3悬停效果 font awesome 图标使用方法参考网站: https:/ ...
- Vue.js——十分钟入门Vuex
一. 什么是Vuex? Vuex Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化. Vuex核 ...
- js 倒计时 php,JS如何实现分钟倒计时(十分钟倒计时实例)
工作中经常需要在页面中设置倒计时,那你知道JS如何实现分钟倒计时吗?这篇文章和大家分享一个JS十分钟倒计时代码,非常简单实用,感兴趣的朋友可以看看. 编写JS倒计时代码需要用到很多JavaScript ...
- php5分钟倒计时代码,JS实现十分钟倒计时代码实例
编写JS倒计时代码需要用到很多JavaScript知识,比如:if函数,Math.floor,定时器setInterval等等,如有不清楚的小伙伴可以参考PHP中文网的相关文章,或者访问 JavaSc ...
- html倒计时代码执行操作,JS实现十分钟倒计时代码实例
编写JS倒计时代码需要用到很多JavaScript知识,比如:if函数,Math.floor,定时器setInterval等等,如有不清楚的小伙伴可以参考PHP中文网的相关文章,或者访问 JavaSc ...
- D3.js、echar.js 前端必备大数据技能
大数据可视化 「 前言 」 web前端一直都是个讲究门面和艺术美感的行业,如果你以为逻辑很强就够了,那就错了,你只适合做后端,真正的好前端是对美感和可视化的东西有一种接近痴狂的爱好,这种契机可以驱使你 ...
- 十分钟,学会使用js三种方法创建本地json数据文件
前言 在干业务时,需要得到一份全国省市到街道的区划数据,刚好业务中连接了高德地图,高德地图又提供了区划的api,这下只需要把数据写到json里了.什么!你说你还不会用js创建json文件?没关系,只需 ...
- 十分钟教会你原生JS压缩图片,极其精简版
十分钟教会你原生JS压缩图片,极其精简版 原文链接:https://blog.csdn.net/yasha97/article/details/83629510 (一)实现思路 先通过input标签获 ...
最新文章
- 优达学城《DeepLearning》2-5:风格迁移
- 关于微信浏览器H5 React,Vue工程化项目input无法自动聚焦疑难杂症排查
- 如何在VMware软件上安装Red hat(红帽)Linux6.9操作系统
- 世上可有后悔药?服务器里建快照
- 业界 | 成为CTO之前,我希望有人告诉我这些
- 【转载】程序员面对下列技术问题,如何做决策
- php评论倒序 zblog_ZblogPHP调用最新、评论最多、浏览最多、置顶文章
- 跨计算机建立视图_解读 | 2019年10篇计算机视觉精选论文(上)
- PROFINET IO设备的GSD文件简介
- Robo 3T下载安装和使用
- linux系统使用宝塔来搭建内部gitlab教程
- Java实战项目-移动电商秒杀系统seckill优化
- FFFfrance博客介绍
- 微信小程序 开发者工具和真机调试都能正常请求访问,线上不能登录请求问题
- Apache Pegasus 首次 Meetup 圆满落幕
- 仿鱼爪新媒交易账号过户转让平台源码担保第三方账号交易系统公众号服务号抖音快手小红书
- php转调页面,如何转调
- js实现word转换为html
- Faceted project metadata file ... could not be read.
- MIMIC-IV- v2.0带着随访数据来啦
热门文章
- 《OpenStack实战》——第1章 介绍OpenStack 1.1OpenStack是什么
- zabbix监控windows(03,08)
- Git详解之二 Git基础
- 求几亿个数中不重复元素的个数
- Symantec BE 12.5 备份Exchange错误排除
- NYOJ-49 开心的小明
- LINUX环境下资源下载中文目录及中文文件名称问题
- [MFC]多线程传参问题 [AfxBeginThread]
- Ubuntu下允许Root用户直接登录图形界面
- 可构造样式表 - 通过javascript来生成css的新方式