在D3 V4中，如何使用.ease（“反弹”）属性？ [英] In D3 V4, how to use .ease("bounce") propertly?
问题描述
以下是我的代码：
<html>
<head>
<meta charset="UTF-8">
<title>circle</title>
</head>
<body>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script>
var width = 400;
var height = 400;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var circle1 = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 45)
.style("fill","green");
circle1.transition()
.duration(1000) //延迟1000ms
.attr("cx", 300);
var circle2 = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 45)
.style("fill","green");
circle2.transition()
.duration(1500)
.attr("cx", 300)
.style("fill", "red");
var circle3 = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 45)
.style("fill","green");
circle3.transition()
.duration(2000)
.transition()
.ease("bounce")
.attr("cx", 300)
.style("fill", "red")
.attr("r", 25);
</script>
</body>
</html>
当我学习如何使用 .ease（bounce）在d3 v4.x中，错误总是跳出html：45。在官方介绍中： .ease（bounce）现在应该像这样使用：
When I learn how to use the .ease("bounce")in d3 v4.x, the error is always jump out in html:45. In the official introduction: .ease("bounce") now should be used like this:
d3.easeBounce(t)
但它也不起作用，所以我不知道如何修改它。你能给我一个很好的介绍吗？谢谢！
but it also doesn't work, so I don't know how to modify it. Could you give me a good introduction? Thanks!
推荐答案
关于 transition.ease（[value]） 告诉我们，
The documentation on transition.ease([value]) tells us, that
必须将值指定为函数。
因此，您只需要传递缓动函数 d3.easeBounce 没有实际调用它（注意，有 d3.easeBounce 后没有括号：
Therefore, you just need to pass in the easing function d3.easeBounce without actually calling it (note, that there are no parentheses following d3.easeBounce):
circle3.transition()
.duration(2000)
.transition()
.ease(d3.easeBounce) // Pass in the easing function
这篇关于在D3 V4中，如何使用.ease（“反弹”）属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
