d3.js学习笔记-06
目录
1 过渡
过渡是一种动态效果，从初始状态转向目的状态
1.1 启动过渡
- d3.transition([selection],[name])：创建一个过渡对象，参数为选择集；一般使用
d3.select("rect").transition()格式，可多次调用产生多种过渡 - transition.delay([delay])：设置延迟时间，过渡会经过一定时间后才开始发生，单位是毫秒。
- transition.duration([duration])：设置过渡的持续时间，单位为毫秒。如duration(2000)，即2s.
- transition.ease(value[,arguments])：设置过渡样式，例如线性过渡、处弹等方式。
example
var rect = svg.append ("rect")
.attr("fi11","steelblue")
.attr("x",10)
.attr("y",10)
.attr("width",100)
.attr("height",30);
.transition()
.delay(500) //延迟500ms再开始
.duration (1000) //过渡时长为1000ms
.ease("bounce") // 过渡样式
.attr("width",300);//设置新的宽度
1.2 过渡的属性
这里的属性指的是被选中的元素的属性，即将要变化的特征
- transition.attr(name, value)：将属性name过渡到目标值valuc。value可以是一个函数。
- transition.attrTween(name,tween)：将属性name使用插值函数tween()进行过渡。
过渡过程持续2s，属性width从100过渡到400. - transition.style(name,value[,priority])：将CSS样式的name属性过渡到目标值value。priority是可选参数，表示CSS样式的优先级，只有null和important两个值。
- transition.styleTween(name, tween[, priority])：将CSS样式的属性name使用函数tween进行过渡。与attrTween()类似。
.style("fi11","steelblue")
.transition()
.style("fi11","red") // 填充的颜色从steelblue变为red
- transition.text(value)：过渡开始时，将文本设置为value值。
- transition.tween(name,factory)：将属性name按照函数factory进行过渡。attrTween()和styleTween()都是用此函数实现的，对文字进行过渡需要使用tween()。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<scrip src="https://d3js.org/d3.v3.min.js"></scrip>
<script src="../d3.v3.min.js"></script> <!--任选一种引用方式：本地/在线-->
</head>
<style>
</style>
<body>
<script>
var svg=d3.select("body")
.append("svg")
.attr("width", 600)
.attr("height", 600)
var text= svg.append ("text")
.attr("fill","red") // 文字的颜色
.attr("x",100) // 文字的x坐标
.attr("y",10) // 文字的y坐标
.attr("dy","1.2em") // 文字的长度
.attr("text-anchor", "end") // 文字的位置
.text(100); // 文本内容
var initx= text.attr("x"); // 获取text的属性x的值
var initText = text.text(); // 获取text的文本
var textTran= text.transition()
.duration(2000)
.tween("text" ,function(){
return function(t){
d3.select(this)
.attr("x", Number(initx)+t*300) // t的含义同上，更新x坐标和文本内容
.text(Math.floor(Number(initText)+t*300));
}
});
</script>
</body>
</html>
- transition.remove()：过渡结束后，删除被选择的元素，适用于淡出
rect.transition()
.attr("width",0)
.remove() // 当元素的宽度变为0的时候，就删除这个元素
1.3 子元素
transition()不能影响选择集中的子元素
选择子元素的方法：
- transition.select(selector)：选择符合选择器的第一个子元素进行过渡。
- transition.selectAll(selector)：选择符合选择器的所有子元素进行过渡。
- transition.filter(selector)：过滤器，与selection.filter()类似。
var dataset = [100,100,100]:
var g = svg.append("g");
var rect = g.selectAll("rect") // 在g元素中添加三个子元素：矩形
.data(dataset)
.enter()
.append("rect")
.attr("fi11","steelblue")
.attr("id", function (d,i){ return "rect" + i;})
.attr("x",10)
.attr("y",function (d,i){ return 10 +i* 35;})
.attr("width", function(d.i){return d; })
.attr( "height",30);
g.transition().select("#rect1") // 选择其中id为rect1的元素进行过渡
.attr("width",300)
g.transition().selectAll("rect") // 选择g元素中所有的矩形
.attr("width",300)
1.4 each()和call()
**选择集里面的each()：**分别处理选择集中的元素
p.data(persons)
.each(function (d,i){
d.age = 20;
})
过渡对象中的each()：transition.each([type,] listener)，支持对事件的响应
type表示事件的类型，有：start(过度开始时执行)、end(过渡结束时执行)、interrupt(过渡执行过程中，该元素在别处被调用一个新的过渡时执行)三种，事件发生时调用监听器listener（一个函数）。
g.transition()
.duration (2000) // 过渡时间2秒
.selectA11("rect") // 操作所有的矩形
.each("start", function(d,i){
console.log("start"); // 过渡开始时输出start
})
.each("end", function (d,i){
console.log("end"); // 过渡结束时输出end
}
.attr("width".300);
g.transition()
.duration (2000)
.selectAll ("rect")
.each("interrupt", funetion(d,i){
console.log("interrupt"):
})
.attr("width",300);
setTimeout(function ({ //
g.transition() // 执行一个新的调度
.selectAl1("rect")
.attr("width",10);
},1000);
选择集中的call()：将选择集自身作为参数，传递给某一函数
d3.selectAll("div").call(function) // 将选择集作为参数传递给函数function使用
过渡对象中的call()：transition.call(function[, arguments])以过渡对象本身为参数调用function
使用坐标轴的时候需要用到
var xscale = d3.scale.linear()
.domain([0,10])
.range([0,300]):
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
var g= svg.append("g")
.attr("class", "axis")
.attr("transform", "tranalate(50,200)")
.cal1(xAxis)
// 坐标轴的定义域发生了变化
xscale.domain([0,50]):
// 定义一个过渡，事件为2000ms，令坐标轴的变化缓缓发生
g.transition()
.duration (2000)
.cal1(xAxis);
1.5 过渡的效果
- linear：
线性地变化，随时间的增长以稳定速度增加。 - cubic：默认的方式，逐渐加快速度。
- elastic：像弹簧似地接近终点。
- back：先往回缩一点，再冲到终点。
- bounce：在终点处弹跳几次
上述方式可以加上一个减号(-)与j in/out联合使用，有四种方式，如linear-in、linear-in-out - in：按正方向运动。
- out：按相反方向运动。
- in-out：前半段按in方式运动，后半段按out方式运动。
- out-in：前半段按out方式运动，后半段按in方式运动。
2 定时器
setInterval(code,millisec)：周期性执行代码，直到**clearInterval()**被调用或窗口被关闭。
setTimeout(code,millisec)：经过指定的时间后执行代码。
// 伪代码
var id = setInterval(draw, 10) ; // 10ms后执行一次函数draw
clearInterval(id) // 通过定时器的Id清除定时器
d3.timer(function[, delay[,time])：相对绝对时间time延迟 delay时间后，time的默认值为Date.now()，再调用function()。
d3.timer(draw,1000); // 当前时间延迟1000ms后调用draw
d3.timer(draw, 500，+new Date(2015,1,1,15,21,30)); // 相对于2015年2月(月份从0开始)1日15时21分30秒后延迟500ms再调用draw
3 过渡应用场景
- 元素刚出现
- 元素刚更新
- 元素被删除
4 动画案例
4.1 时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title></title>
<script src="../d3.v3.min.js"></script>
</head>
<style>
/* 时钟的样式 */
.time {
font-family: cursive;
font-size: 40px;
color:red;
}
</style>
<body>
<script>
// 按照指定格式返回时间
function getTimeString() {
var time = new Date(); // 获取本地当前时间
var hours = time.getHours(); // 获取时
var minutes = time.getMinutes(); // 获取分
var seconds = time.getSeconds(); // 获取秒
hours = hours < 10 ? "0" + hours : hours; // 调整格式，保持两位数
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
// 返回时间字符串
return hours + ":" + minutes + ":" + seconds;
}
var svg = d3.select("body").attr("width", 400).attr("height", 400);
var text = svg
.append("text")
.attr("x", 200)
.attr("y", 200)
.attr("class", "time")
.text(getTimeString());
function updateTime() {
text.text(getTimeString());
}
// 定时器更新时间,每秒更新一次
setInterval(updateTime, 1000)
</script>
</body>
</html>
References
[1] 吕之华.精通D3.js：交互式数据可视化高级编程[M].北京：电子工业出版社,2015∶151-172.
363
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
