这是我的代码:
<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")现在应该这样使用:
d3.easeBounce(t)
但它也不起作用,所以我不知道如何修改它.你能给我一个很好的介绍吗？谢谢!
文档transition.ease([value])告诉我们,那
必须将该值指定为函数.
因此,您只需要传入缓动函数d3.easeBounce而不实际调用它(注意,下面没有括号d3.easeBounce):
circle3.transition()
.duration(2000)
.transition()
.ease(d3.easeBounce) // Pass in the easing function