D3.js核心函数之过渡

最新推荐文章于 2023-07-23 00:33:48 发布

仗剑东游的猫

最新推荐文章于 2023-07-23 00:33:48 发布

阅读量685

点赞数 1

分类专栏： D3从入门到秃头文章标签： d3 transition

本文链接：https://blog.csdn.net/miao_yf/article/details/102477545

版权

过渡是一种特殊类型的选择器，这种操作符的应用随时间平滑而不是瞬间变换

开始过渡

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

最低0.47元/天解锁文章

仗剑东游的猫

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
D3.js核心函数之过渡

过渡是一种特殊类型的选择器，这种操作符的应用随时间平滑而不是瞬间变换开始过渡d3.transition([selection],[name])，创建动画过渡，等价于d3.select(document).transition()transition.delay([delay])，指定过渡延迟，以毫秒为单位。如果延迟为常量，则所有的元素被赋予相同的延迟，如果延迟是一个函数，则这个函数的返...
复制链接

扫一扫