D3.js 动画 过渡效果 (V3版本)
2019-05-22 06:33:43来源:博客园 阅读 ()
1 var width = 600;
2 var height = 400;
3
4 var svg = d3.select("#body")
5 .append("svg")
6 .attr("width",width)
7 .attr("height",height)
8
9 svg.append("rect")
10 .attr("fill","yellow")
11 .attr("x",100)
12 .attr("y",100)
13 .attr("width",100)
14 .attr("height",30)
15 .transition()
16 .attr("width",300)
1 var rect = svg.append("rect")
2 .attr("fill","yellow")
3 .attr("x",100)
4 .attr("y",100)
5 .attr("width",100)
6 .attr("height",30)
7
8 //打印rect
9 console.log(rect) //rect是选择集
10
11 //启动过渡效果
12 var rectTran = rect.transition()
13
14 //打印rectTran
15 console.log(rectTran) //rectTran是一个过渡对象
1 var rect = svg.append("rect")
2 .attr("fill","yellow")
3 .attr("x",100)
4 .attr("y",100)
5 .attr("width",100)
6 .attr("height",30)
7 var rectTran = rect.transition()
8 .delay(500) //延迟500ms再开始
9 .duration(1000) //过渡时长为1000ms
10 .ease("blunce") //过渡样式
11 .attr("width",300) //目标属性
1 var rect = svg.append("rect")
2 .attr("fill","yellow")
3 .attr("x",100)
4 .attr("y",100)
5 .attr("width",100)
6 .attr("height",30)
7
8
9 var rectTran = rect.transition() //开始一个过渡
10 .attr("width",300) //目标宽度为300
11 .transition() //开始一个过渡
12 .attr("height",300) //目标高度为300
13 .transition() //开始一个过渡
14 .attr("width",100) //目标宽度为100
15 .transition() //开始一个过渡
16 .attr("height",100) //目标高度为100
1 .attr("width",100)
2 .transition()
3 .attr("width",300)
1 var rect = svg.append("rect")
2 .attr("fill","yellow")
3 .attr("x",100)
4 .attr("y",100)
5 .attr("width",100)
6 .attr("height",30)
7
8 var rectTran = rect.transition()
9 .duration(2000)
10 .attrTween("width",function(d,i,a){
11 return function(t){
12 return Number(a) + t * 300
13 }
14 })
1 svg.append("rect")
2 .attr("fill","yellow")
3 .attr("x",100)
4 .attr("y",100)
5 .attr("width",100)
6 .attr("height",30)
7 .transition()
8 .duration(2000)
9 .attr("fill",'red')
1 svg.append("rect")
2 .attr("fill","yellow")
3 .attr("x",100)
4 .attr("y",100)
5 .attr("width",100)
6 .attr("height",30)
7 .transition()
8 .duration(2000)
9 .attr("width",300)
10
11 var text = svg.append("text")
12 .attr("fill","white")
13 .attr("x",150)
14 .attr("y",100)
15 .attr("dy","1.2em")
16 .attr("text-anchor","end")
17 .text(100)
18
19
20 var initx = text.attr("x")
21 var initText = text.text()
22
23 var textTran = text.transition()
24 .duration(2000)
25 .tween("text",function(){
26 return function(t){
27 d3.select(this)
28 .attr("x",Number(initx) + t * 250 )
29 .text(Math.floor(Number(initText) + t * 300 ))
30 }
31 })
1 //当t为0时,函数体力的操作是:
2 d3.select(this)
3 .attr("x",150 + 0 * 250)
4 .text(Math.floor(100 + 0 * 300))
5
6 //当t为1时,函数体里的操作是:
7 d3.select(this)
8 .attr("x",150 + 1 * 250 )
9 .text(Math.floor(100 + 1 * 300))
1 var rect = svg.append("rect")
2 .attr("fill","yellow")
3 .attr("x",100)
4 .attr("y",100)
5 .attr("width",100)
6 .attr("height",30)
7
8 rect.transition()
9 .attr("width",0)
10 .remove()
原文链接:https://www.cnblogs.com/littleSpill/p/10896253.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:CKEditor 4 上传图片
下一篇:弹窗组件的开发
- 详解AngularJS 实现JavaScript 动画效果 2019-11-12
- d3.js制作蜂巢图表带动画效果 2019-08-14
- Vue学习之动画小结(六) 2019-08-14
- D3.js(v3)+react 制作 一个带坐标轴与比例尺的折线图 2019-05-22
- D3.js 对角线生成器 (V3版本) 2019-05-16
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash