在 D3 V4 中，如何正确使用 .ease(“bounce")? [英] In D3 V4, how to use .ease("bounce") propertly?
本文介绍了在 D3 V4 中，如何正确使用 .ease(“bounce")?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的代码:
<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>
当我在 d3 v4.x 中学习如何使用 .ease("bounce") 时，错误总是在 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]) 告诉我们，
值 必须指定为函数.
因此，你只需要传入缓动函数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(“bounce")?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
