过渡是一种特殊类型的选择器,这种操作符的应用随时间平滑而不是瞬间变换
开始过渡
d3.transition([selection],[name]),创建动画过渡,等价于d3.select(document).transition()
transition.delay([delay]),指定过渡延迟,以毫秒为单位。如果延迟为常量,则所有的元素被赋予相同的延迟,如果延迟是一个函数,则这个函数的返回值将被用来为每个元素的延迟设置值。延迟总是相对一系列过渡中的第一个而言
transition.duration([duration]),指定每个元素的持续时间,单位为毫秒,默认持续时间为250毫秒
transition.ease([value[,arguments]]),指定过渡的缓动函数,cubic-in-out:默认缓动函数,慢入慢出;linear:普通的线性变化;circle:由慢到快的变换到最终状态;elastic:带有弹跳的到达最终状态;bounce:在最终状态处弹跳几次
过渡中的操作
内容
transition.attr(name,value),通过指定的name和value设置过渡属性的值
transition.attrTween(name,tween),name为过渡变化的属性名,tween是补间函数function(d,i,a),d是被绑定的数据,i是索引,a是指定属性的初始值,该函数返回的function(t),就是插值函数,t的范围是[0,1],0表示变化的起始,1表示变化的结束。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>补间动画</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<div class="box">
<svg></svg>
</div>
<script type="text/javascript">
var svg = d3.select("svg");
var rect = svg.append("rect")
.attr("fill", "yellow")
.attr("x", 100)
.attr("y