Charlie Charlie - 13 days ago 10
Javascript Question

In D3 V4, how to use .ease("bounce") propertly?

Here is my code:

<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>


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!

Answer

The documentation on transition.ease([value]) tells us, that

The value must be specified as a function.

Therefore, you just need to pass in the easing function 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
Comments